Kendo網格更改多個選定的單元格值

Question

假設我有幾行填充數字的數據。 我想選擇多個單元格然后單擊網格外的按鈕將其值更改為其他數字，讓我們說'8'。 看樣品 。

Telerik的員工給了我這個解決方案：

$(".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();
});

但問題是我不知道將選擇哪些單元格，因此我無法使用item.ProductName 。 有沒有辦法直接設置所有選定單元格的值，例如cellsToChange[i].value ？

Answer 1

您可以從grid.columns或相應的th元素中獲取列名。 使用grid.cellIndex方法選擇正確的列：

$("#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();
});

關於你的注釋： dataItem.set()導致<tr>元素從它們的上下文中刪除（因為grid.refresh()將為視圖創建新的行），因此， grid.dataItem()不會使用您仍然可以引用的舊DOM元素為您提供預期結果。

如果你想使用dataItem.set() ，你可以嘗試這樣的解決方法：

$("#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);
    }
});

（ 演示 ）

Answer 2

您必須首先檢索網格的ColumnList，然后循環遍歷它

$(".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();
});