Check box uncheck while scroll up and down in kendo ui grid

Question

I have one kendo UI grid and I am binding from Javascript below is the code for same.

My issue is when I check the check box and scroll down the grid and scroll up then that checked checkbox is uncheck even I go to next page then also get the same issue.

$(gridName).html("");
    var fieldSchema = [];
    var columnSchema = [];

columnSchema.push({
    field: "",
    width: "30px",
    template: "<input id='chkDelete' type='checkbox' />",
});


var counter = 0;
$.each(data, function (index) {
    counter = counter + 1;
    var xmldoc = $.parseXML(data[index].CustomFields);
    var $xml = $(xmldoc);
    var jsonStr = '{';
    $xml.find("Fields").find("Field").each(function () {
        jsonStr = jsonStr + '"' + $(this).attr("Title").replace(/\s/g, '').replace(/[^\w\s]/gi, '') + '":{';
        jsonStr = jsonStr + '"Title":"' + $(this).attr("Title") + '",';
        jsonStr = jsonStr + '"Value":"' + $(this).attr("Value") + '",';
        jsonStr = jsonStr + '"Id":"' + $(this).attr("Id") + '"},';

        if (counter == 1) {
            columnSchema.push({
                field: $(this).attr("Title").replace(/\s/g, '').replace(/[^\w\s]/gi, '') + ".Value",
                title: $(this).attr("Title"),
                width: "128px",
                template: "#=" + $(this).attr("Title").replace(/\s/g, '').replace(/[^\w\s]/gi, '') + ".Value#",
            });

        }
    });
    jsonStr = jsonStr + '"CustomFields":"' + data[index].CustomFields.replace(/\"/g, "\'") + '",';
    jsonStr = jsonStr + '"ValidationPlanId":"' + data[index].ValidationPlanId + '",';
    jsonStr = jsonStr + '"IsTrCreated":"' + data[index].IsTrCreated + '",';
    jsonStr = jsonStr + '"Note":"' + data[index].Note + '",';
    jsonStr = jsonStr + '"IsUpdate":"' + data[index].IsUpdate + '",';
    jsonStr = jsonStr + '"TestRequestId":"' + data[index].TestRequestId + '"';
    jsonStr = jsonStr + '}';

    fieldSchema.push($.parseJSON(jsonStr));
});

var dtVpAdd = new kendo.data.DataSource({
    data: fieldSchema,
    schema: {
        model: {
            id: "ValidationPlanId"
        },
        total: function (result) {
            var totalCount = result.length;
            return totalCount;
        }

    }

});
dtVpAdd.pageSize(10);


$(gridName).kendoGrid({
    dataSource: new kendo.data.DataSource({
        data: fieldSchema,
        schema: {
            model: {
                id: "ValidationPlanId"
            }
        },
        pageSize: 10
    }),
    columns: columnSchema,
    filterable: true,
    sortable: {
        mode: "multiple",
        allowUnsort: true
    },
    scrollable: {
        virtual: true
    },
    resizable: true,
    reorderable: true,
    pageable: {
        input: true,
        numeric: false
    },

    dataBound: function () {
        $(gridName).on('click', '#chkDeleteAll', function () {
            var checked = $(this).is(':checked');
            $("input[id*='chkDelete']:checkbox").attr('checked', checked);
        });
    },

});

Answer 1

Checkboxes in a `Grid are little tricky since you cannot update them (click in the checkbox) without entering in edit mode.

If you do not take this into account, you see the checkbox marked but the model is actually not updated so when you load new data (page, scroll, filter...) the changes get lost.

One possible solution is define an event handler that when the checkbox is clicked updates the model.

Steps:

Change your template definition to:

template: "<input class='ob-checkbox' type='checkbox' #= Checkbox ? 'checked' : '' #/>",

Where I specify how to render a checkbox and which is the current value (in this example the value of Checkbox field).

Then, define a handler for these input. To do so, instead of doing it in dataBound I prefer doing it after initializing the Grid with a live event handler. Something like:

grid.wrapper.on("click", ".ob-checkbox", function(e) {
    // Get the row containing the checkbox
    var row = $(e.currentTarget).closest("tr");
    // Get the item in the model corresponding to that row
    var item = grid.dataItem(row);
    // Get current value of the rendered checkbox (not the value in the model)
    var value = this.checked;
    // And update the model
    item.set("Checked", value);
});

Where grid is defined as:

var grid = $(gridName).data("kendoGrid");

See it running here: http://jsfiddle.net/OnaBai/QubWN/