How to update multiple rows on kendo grid with out

Question

I have a kendo grid with columns as:

i write a function for Close button, when user select rows by check and click Close button, this will auto update IsClosed Column to "True"

and this is my code:

$(function () {
    $('#btnClose').click(function () {
        var grid = $('#grOrders').data("kendoGrid");
        $.each($('#grOrders :checkbox:checked').closest('tr'), function () {                
            var data = grid.dataItem($(this));
            data.set("IsClosed", true);
        });
    });

});

when i test, it only update a first row checked, don't know why? please help me.

Answer 1

The problem is that as soon as you invoke a set("IsClosed", true) KendoUI redraws the grid so next grid.dataItem will not return what you expect.

Instead, try doing a first each for getting the list of items that need to be modified and then a second each for actually modifying them. Something like:

$('#btnClose').click(function () {
    var grid = $('#grid').data("kendoGrid");
    var rows = $('#grid :checkbox:checked');
    var items = [];
    $.each(rows, function () {
        var item = grid.dataItem($(this).closest("tr"));
        items.push(item);
    });
    $.each(items, function(idx, elem) {
        elem.set("IsClosed", true);
    });
});