使用数据将行添加到 javascript 中的 kendo 网格

Question

添加新记录时，会向用户显示一个包含要填写的表单的模式。单击“确定”时，数据将保存到数据库中，模式关闭。但是我现在必须将此记录添加到网格中。我不能只从数据库刷新网格，因为它可能会清除用户可能在网格中所做的其他更改。

我需要从各种表单字段中获取数据并将其作为 javascript 中的新行传递到网格。我见过一个示例，其中一行从一个 kendo 网格复制到另一个网格，但我找不到任何从头开始客户端向 kendo 网格添加新记录的地方。这是从一个网格复制到另一个网格的示例：how to add a new row with pre defined data in kendo grid?

基本上我想做的是这样的：

var newRow = {field1: $("#field1").val(), field2: $("#field2").val(), field3: $("#field3").val()};

var grid = $("#grid").data("kendoGrid");
grid.addRow(newRow);

Answer 1

这不是 addRow() 的目的。根据文档，它 "Adds an empty data item to the grid"，因此它不接受任何参数，也不向网格添加数据。

您应该使用 dataSource.add() 添加新数据：

var newRow = {field1: $("#field1").val(), field2: $("#field2").val(), field3: $("#field3").val()};

var grid = $("#grid").data("kendoGrid");
grid.dataSource.add(newRow);

Demo

Answer 2

使用 grid.insert(0, dataItem);

在网格顶部插入

您的样本：

var newRow = {field1: $("#field1").val(), field2: $("#field2").val(), field3: $("#field3").val()};

var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert(0, newRow);

使用数据将行添加到 javascript 中的 kendo 网格

Add row to kendo grid in javascript with data

javascript

telerik

kendo-ui