Kendo网格更改多个选定的单元格值

Question

Let's say I have few rows of data populated with numbers. I want to select multiple cells and then on click on a button outside the grid change their values to some other number, let's say '8'. See the sample .

The guys at Telerik gave me this solution:

$(".change").click(function () {
    var grid = $("#Grid").data("kendoGrid");
    var cellsToChange = grid.select();

    for (var i = 0; i < cellsToChange.length; i++) {
        var item = grid.dataItem($(cellsToChange[i]).closest("tr"));
        item.ProductName = "new value";
    }

    grid.refresh();
});

But the problem is that I don't know which cells will be selected, so I can't work with item.ProductName , for example. Is there a way to set the value of all selected cells directly, something like cellsToChange[i].value ?

Answer 1

You can either get the column name from grid.columns or from the corresponding th element. use the grid.cellIndex method to select the correct column:

$("#change").click(function() {
    var selected = grid.select();
    var header = grid.thead;
    for (var i = 0, max = selected.length ; i < max ; i++) {
        var index = grid.cellIndex(selected[i]);
        var th = $(header).find("th").eq(index);
        // could also use grid.columns[index].field 
        // (not sure if this gets reordered on column reorder though)
        var field = $(th).data("field");

        var item = grid.dataItem($(selected[i]).closest("tr"));
        item[field] = "new value";
    }

    grid.refresh();
});

Regarding your comment: dataItem.set() causes the <tr> elements to get removed from their context (because grid.refresh() will create new rows for the view), and because of that, grid.dataItem() won't give you the expected result with the old DOM elements you still have a reference to.

If you want to use dataItem.set() , you can try something like this as a work-around:

$("#change").click(function () {
    var selected = grid.select(),
        header = grid.thead,
        dataItem,
        index,
        field,
        value,
        th;

    for (var i = 0, max = selected.length; i < max; i++) {
        dataItem = grid.dataItem($(selected[i]).closest("tr"));
        index = $(selected[i]).index();
        th = $(header).find("th").eq(index);
        field = $(th).data("field");
        value = "new value " + i;

        setTimeout(function (dataItem, field, value) {
            return function () {
                dataItem.set(field, value);
            }
        }(dataItem, field, value), 5);
    }
});

( demo )

Answer 2

You have to retrieve the ColumnList of your grid first and then loop through it

$(".change").click(function () {
    var grid = $("#Grid").data("kendoGrid");
    var columnsListOfView = grid.columns;
    var cellsToChange = grid.select();

    for (var j = 0; i < cellsToChange.length; i++) {
        var item = grid.dataItem($(cellsToChange[i]).closest("tr"));
        for (var j = 0; j < columnsListOfView.length; j++) {
         //Here columnsListOfView[j].field will give you the different names that you need 
         var field=columnsListOfView[j].field;
         item[field] = "new value";    
        }
    }

    grid.refresh();
});