使用JavaScript向kendo表格添加行并填充数据

Question

当添加新记录时，用户会看到一个包含填写表单的模态框。当点击“确定”时，数据将保存到数据库并关闭模态框。但是我现在需要将此记录添加到网格中。我不能仅从数据库刷新网格，因为它可能会清除用户在网格中进行的其他更改。

我需要从各种表单字段中获取数据，并将其作为新行传递给JavaScript中的网格。我看过一个示例，其中一行是从一个kendo网格复制到另一个网格，但我找不到任何可以从头开始在客户端向kendo网格添加新记录的内容。这里是从一个网格复制到另一个网格的示例：如何在kendo网格中添加预定义数据的新行？ 基本上，我想做的就是这样：

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

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

- Legion

Answer 1

这并不是使用 addRow() 的目的。根据文档说明，它“向网格添加一个空数据项”，因此它不接受任何参数且不会将数据添加到网格中。

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

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

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

Demo

- DontVoteMeDown

Answer 2

使用grid.insert(0, dataItem)方法将数据项插入到Grid的顶部。

示例：

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

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

- Severin