Kendo Grid and checkboxes - select all for a given column, "select all previous" / "deselect all after" for a given row's cell

Question

The background for this question centres on a grid demonstrating progress in tasks on work items. Each row represents a work item that follows a set pattern of steps, some of which are performed per work item, or are performed on all work items at the same time.

The brief is that a checkbox be provided in the header for each step that is performed on all work items simultaneously, and when this checkbox is checked, all the checkboxes in that column are checked.

Furthermore (and I understand this might be a separate question, but I am including this since it is part of the same issue I am experiencing), whenever a checkbox in a row is checked, all the previous checkboxes in that row are also checked. It also stands that any checkboxes after a particular checkbox are unchecked if they are inadvertently checked, but I assume this would be a minor addition to the "select" code for a row cell checkbox.

My understanding is to have an "on click" event in the column header checkbox triggering a function that iterates through rows and selects/deselects checkboxes in that column. These checkboxes in turn would have onclick and "onchange"(since the checkbox isn't actually being "clicked"?) events that select all the checkboxes prior to that checkbox and deselect those checkboxes further along the row.

See below for example code rendering the table and some pseudo-code; the example is using static data as a proof of concept to the client, but will eventually interact with a SQL DB. I'm happy to be shown a question that answers any aspect of this question, but to be frank the questions that might answer these issues aren't very clear to me, or better serve different UIs/languages.

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource:
        {
            transport:
            {
                read:  {
                    url: "<?= $site_url ?>asset/data/production_progress.json",
                    type: "GET",
                    dataType: "json"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                    else
                    {
                        return "";
                    }
                }
            },
            schema:
            {
                model:
                {
                    id:"Item",
                    fields:
                    {
                        Item: { editable: false },
                        Step1: { type:"boolean", editable: true },
                        Step2: { type:"boolean", editable: true },
                        Step3: { type:"boolean", editable: true },
                        Step4: { type:"boolean", editable: true },
                        Step5: { type:"boolean", editable: true }
                    }
                }
            }
        },
        scrollable: false,
        pageable: false,
        columns: [
            { field: "Item" },
            { field: "Step1", title: "Step 1", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step1 ? "checked=checked" : "" # ></input>' },
            { field: "Step2", title: "Step 2", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step2 ? "checked=checked" : "" # ></input>' },
            { field: "Step3", attributes: {style: "text-align: center"}, template: '<input class="Step3" name="Step 3" type="checkbox" #= Step3 ? "checked=checked" : "" # ></input>', headerTemplate: 'Step 3<input type="checkbox" name="step3SelectAll"></input>' },
            { field: "Step4", title: "Step 4", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step4 ? "checked=checked" : "" # ></input>' },
            { field: "Step5", title: "Step 5", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step5 ? "checked=checked" : "" # ></input>' }
        ],
        editable: "inline"
    });

    $("#step3SelectAll").change(function(){
        if ($('#step3SelectAll').is(':checked')) {
            $('.Step3').prop('checked', true);
        }
        else
        {
            $('.Step3').prop('checked', false);
        }
    });

    // Start of pseudo-code
    $("#grid.row.Step3").change(function() {
        // Get dataSource from Grid
        // Not sure how this is done, examples seen have separate dataSources which is against coding requirements

        // Set all row cells prior to Step 3 as Selected
        dataSource.row.Step1.value = "true";
        dataSource.row.Step2.value = "true";
        // Set all tor cells after to Step 3
        dataSource.row.Step4.value = "false";
        dataSource.row.Step5.value = "false";
    });
});

EDIT: Figured out how to select/deselect a whole column by setting the column's (in this case Step 3) template checkbox as having a class ( in this case "Step3"), and adding in the additional "$("#step3SelectAll").change" function. Now looking at row-only checkbox changes.

Answer 1

I'm answering one part of the question and closing it so I can be more focused on the remaining aspect of my problem in a separate question. For those who are reading this, I managed to resolve the "select all in a column" issue by setting the header template to contain a specific class, then have a function that triggers whenever anything with that class changes:

The Kendo Grid column entry:

{ field: "Step3", attributes: {style: "text-align: center"}, template: '<input class="Step3" name="Step 3" type="checkbox" #= Step3 ? "checked=checked" : "" # ></input>', headerTemplate: 'Step 3<input type="checkbox" name="step3SelectAll"></input>' }

The function that checks/unchecks the checkboxes:

$("#step3SelectAll").change(function(){
    if ($('#step3SelectAll').is(':checked')) {
        $('.Step3').prop('checked', true);
    }
    else
    {
        $('.Step3').prop('checked', false);
    }
});

{ field: "Step3", attributes: {style: "text-align: center"}, template: '', headerTemplate: 'Step 3' }

Answer 2

{
    field: "Step3", 
    attributes: {style: "text-align: center"},
    template: '<input class="Step3" name="Step 3" type="checkbox" #= Step3 ? "checked=checked" : "" # ></input>',
    headerTemplate: 'Step 3<input type="checkbox" id="step3SelectAll"></input>'
}

use id = "step3SelectAll" instead of name="step3SelectAll" because you have used "#`" in $("#step3SelectAll").