CODEWITHSUNDEEP
javascriptloopskendo-uikendo-griddataitem
GeorgeB
GeorgeB

Reputation: 848

Kendo Grid.dataItem loop not working

So my aim it to loop through all selected item in my kendo grid, but after the first iteration the dataItem method returns undefined.

function myFunction() {
var selectedItem = $("#DropDown").val();
var grid = $("#Grid").getKendoGrid();
var selectedItems = grid.select();
for (var i = 0; i < selectedItems.length; i++) {
    var dataItem = grid.dataItem(selectedItems[i]);
    if (dataItem != undefined)
        dataItem.set("Item", SelectedItem);
}
}

Does anyone know why this might be happening?

Upvotes: 1

Views: 2878

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

That happens because set() performs a grid refresh behind-the-scenes so the DOM is recreated. The array you had with the selected items is lost. You can't rely on the tr's references. As a suggestion I think you can use they indexes instead:

function myFunction() {
    var selectedItem = $("#DropDown").val();
    var grid = $("#Grid").getKendoGrid();
    var selectedItems = grid.select().toArray().map((item) => { return $(item).index(); });

    for (var i = 0; i < selectedItems.length; i++) {
        var currentItem = grid.tbody.find(`tr:eq(${selectedItems[i]})`);
        var dataItem = grid.dataItem(currentItem );
        if (dataItem != undefined)
            dataItem.set("Item", SelectedItem);
    }
}

  • var selectedItems = grid.select().toArray().map((item) => { return $(item).index(); });

    This line gets an array of indexes from the selected grid rows to iterate further ahead;

  • var currentItem = grid.tbody.find(`tr:eq(${selectedItems[i]})`);

    This line retrieves the selected row from by the index.

Demo

Upvotes: 1

Related Questions