刷新单个剑道网格行

Question

有没有办法刷新单个 Kendo 网格行而不刷新整个数据源或使用 jQuery 为每个单元格设置值？

Answer 1

如何定义要更新的行？我假设这是您选择的行，并且正在更新的列的名称是

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

中。

Answer 2

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);

Answer 3

我找到了一种方法来更新网格数据源并在网格中显示，而无需刷新所有网格。 例如，您选择了一行，并且想要更改列“名称”值。

//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);

Answer 4

updateRecord(record) {
    const grid = $(this.el.nativeElement).data('kendoGrid');
    const row = grid.select();
    const dataItem = grid.dataItem(row);
    for (const property in record) {
      if (record.hasOwnProperty(property)) {
        dataItem.set(property, record[property]);
      }
    }
  }

Answer 5

随着 Kendo UI 2023 年第四季度的发布，字体图标将被逐步淘汰，取而代之的是 SVG 图标。目前（2024 年第一季度）需要以编程方式注入 SVG 图标。如果使用 Adam Yaxley 定义的 kendoFastRedrawRow 函数重绘包含一个或多个带有 SVG 图标的单元格且其父列具有模板的行，您可以通过添加进行以下更改来保留 SVG 图标。

旧代码：

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

    // Render using template
    cell.html(kendoTemplate(dataItem));
}  

新代码：

let templateIsDefined = (template !== undefined && template !== null && template.length !== undefined && template.length > 0);
if (templateIsDefined) {
    //check for class k-icon and k-svg-icon
    let kSvgIconChildElementsInOriginalCell = cell.find(".k-svg-icon");
    if (kSvgIconChildElementsInOriginalCell.length > 0) {
    let templateAsDomObj = $.parseHTML(template);

    //check for class k-icon and k-svg-icon
    let kIconElementsInTemplate = $(templateAsDomObj).find(".k-icon");

    if (kIconElementsInTemplate.length > 0 && kSvgIconChildElementsInOriginalCell.length > 0) {

        //direct 1:1 replacements of template k-icon with k-svg-icon info from the original cell
        let x = 0;
        for (let j = 0; j < kIconElementsInTemplate.length; j++) {
            if (kSvgIconChildElementsInOriginalCell.length > j) {
                let oldHtml = kIconElementsInTemplate.eq(j).prop('outerHTML');
                let newHtml = $(kSvgIconChildElementsInOriginalCell).eq(j).prop('outerHTML');
                if (template.indexOf(newHtml) === -1) {
                    template = template.replace(oldHtml, newHtml);
                }
            }
            x=j+1;
        }
        //inject extra k-svg-icon info from original cell
        if (kSvgIconChildElementsInOriginalCell.length > x) {
            for (let j = x; j < kSvgIconChildElementsInOriginalCell.length; j++) {
                let newHtml = $(kSvgIconChildElementsInOriginalCell).eq(j).prop('outerHTML');
                if (template.indexOf(newHtml) === -1) {
                    template += newHtml;
                }
            }
        }
    }
}

//render the cell using the template
let kendoTemplate = kendo.template(template);
let kendoTemplateHtml = kendoTemplate(dataItem);
cell.html(kendoTemplateHtml);