web-dev-qa-db-ja.com

単一の剣道グリッド行を更新する

データソース全体を更新したり、jQueryを使用して各セルの値を設定したりせずに、単一のKendoグリッド行を更新する方法はありますか？

kendo-uikendo-grid
37
rafoo

更新する行をどのように定義しますか？これが選択した行であり、更新される列の名前はsymbolであると仮定します。

// Get a reference to the grid
var grid = $("#my_grid").data("kendoGrid");

// Access the row that is selected
var select = grid.select();
// and now the data
var data = grid.dataItem(select);
// update the column `symbol` and set its value to `HPQ`
data.set("symbol", "HPQ");

DataSourceのコンテンツはobservableオブジェクトであることに注意してください。つまり、setを使用して更新でき、変更が反映されるはずです魔法のようにgrid。

51
OnaBai

data.setは実際にグリッド全体を更新し、場合によってはdataboundイベントを送信します。これは非常に遅く、不必要です。また、拡張された詳細テンプレートは折りたたまれますが、これは理想的ではありません。

私が書いたこの関数を使用して、剣道グリッドの単一の行を更新することをお勧めします。

// Updates a single row in a kendo grid without firing a databound event.
// This is needed since otherwise the entire grid will be redrawn.
function kendoFastRedrawRow(grid, row) {
    var dataItem = grid.dataItem(row);

    var rowChildren = $(row).children('td[role="gridcell"]');

    for (var i = 0; i < grid.columns.length; i++) {

        var column = grid.columns[i];
        var template = column.template;
        var cell = rowChildren.eq(i);

        if (template !== undefined) {
            var kendoTemplate = kendo.template(template);

            // Render using template
            cell.html(kendoTemplate(dataItem));
        } else {
            var fieldValue = dataItem[column.field];

            var format = column.format;
            var values = column.values;

            if (values !== undefined && values != null) {
                // use the text value mappings (for enums)
                for (var j = 0; j < values.length; j++) {
                    var value = values[j];
                    if (value.value == fieldValue) {
                        cell.html(value.text);
                        break;
                    }
                }
            } else if (format !== undefined) {
                // use the format
                cell.html(kendo.format(format, fieldValue));
            } else {
                // Just dump the plain old value
                cell.html(fieldValue);
            }
        }
    }
}

例：

// Get a reference to the grid
var grid = $("#my_grid").data("kendoGrid");

// Access the row that is selected
var select = grid.select();
// and now the data
var data = grid.dataItem(select);

// Update any values that you want to
data.symbol = newValue;
data.symbol2 = newValue2;
...

// Redraw only the single row in question which needs updating
kendoFastRedrawRow(grid, select);

// Then if you want to call your own databound event to do any funky post processing:
myDataBoundEvent.apply(grid);
33
Adam Yaxley

グリッドのdataSourceを更新し、すべてのグリッドを更新せずにグリッドに表示する方法を見つけました。たとえば、選択した行があり、列の「名前」の値を変更する場合。

//the grid
var grid = $('#myGrid').data('kendoGrid');    
// Access the row that is selected
var row = grid.select();
//gets the dataItem
var dataItem = grid.dataItem(row);
//sets the dataItem   
dataItem.name = 'Joe';
//generate a new row html
var rowHtml = grid.rowTemplate(dataItem);
//replace your old row html with the updated one
row.replaceWith(rowHtml);
5
Srulik