KendoUI ASP.NetMVC网格-如何添加行客户端

Question

我正在尝试实现一个非常简单的网格，它可以通过工具栏按钮添加新行。文件中提供的样本似乎都没有达到预期效果。

@model Models.MyModel
@{
ViewBag.Title = "Simple Grid";
}
<div class="container-fluid">
<div class="row"></div>
<div class="row">
<div class="col-xs-11">
@(Html.Kendo().Grid<Models.MyModel>()
.Name("myGrid")
.ToolBar(toolbar => {
toolbar.Create().Text("Add New Row");
})
.Columns(columns => {
columns.Bound(p => p.Name).Width(200);
columns.Bound(p => p.Header1).Width(100);
columns.Bound(p => p.Header2).Width(100);
})
.Scrollable()
.Editable(ed => ed.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
.HtmlAttributes(new { style = "height:350px;" })
.DataSource(ds => ds
.Custom()
.Schema(schema => schema
.Model(model => {
model.Id("Id");
model.Field("Name", typeof(string));
model.Field("Header1", typeof(string));
model.Field("Header2", typeof(string));
})
)
)
)
</div>
</div>
</div>

上面是一个简单的index.chtml页面，该页面使用布局页面并注入所有jQuery和KendoUI脚本。

加载页面时，获取JS错误无法获取未定义或空引用的属性"nodeName">

不确定为什么会发生这种情况，但点击continue，会按预期显示一个空网格。

点击"添加新行"工具栏按钮会导致另一个JS错误(同上)

问题：我是否缺少网格上的配置选项？根据文档，这应该是"开箱即用"的。我想要实现的只是一个简单的网格，每次单击"添加"按钮都会添加一个新的空行。

Answer 1

虽然一开始可能有点难看，但使用Custom()配置需要的不仅仅是设置.Schema()配置。您可以参考Custom DataSource文档文章中的示例，以获取对此的引用。每个样本都有至少用read配置集定义的Transport字段，这样DataSource就知道在哪里读取数据。

由于您在这里执行CRUD操作，我还建议您设置其他传输字段(创建、读取、更新、销毁)，以确保您可以正确使用控制器并与后端通信。

作为一个快速提示，如果你在Telerik网站上搜索错误unable to get property 'nodeName' of undefined or null reference，你会开始得到这个错误是由于组件配置不正确引起的提示。它不是网格特有的，但它确实会不时弹出，问题几乎总是归结为配置选项。

现在，为了解决这个特殊的问题，我建议使用Ajax绑定，而不是自定义绑定。Ajax绑定使用起来非常简单，非常适合这种情况，在这种情况下，您希望在页面中添加一个简单的Grid，而不需要使用更高级的功能来进行更高级的配置。此外，您还可以使用客户端模型为服务器端设置验证等(无需手动设置模式)。

或者，只需将传输字段配置设置为有效的ActionResults或URL，即可正确地来回推送信息。

当第一次实现任何新产品时，我总是建议密切关注文档，并从较小的示例和构建形式开始。如果你想使用自定义数据源，那么我说从更大的配置开始，删除部分，直到得到你想要的最小部分。