KendoUI ASP.Net MVC网格-如何添加行客户端？

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”

不确定为什么会发生这种情况，但是单击继续，将显示预期的空白网格。

单击“添加新行”工具栏按钮会导致另一个JS错误（与上面相同）

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

Answer 1

虽然一开始很难看，但是使用Custom()配置不仅仅需要设置.Schema()配置。 您可以参考“ 自定义数据源”文档文章中的示例以获取对此的引用。 每个样本至少具有定义为read配置集的传输字段，以便数据源知道从何处读取数据。

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

快速说明一下，如果您在Telerik站点附近搜索unable to get property 'nodeName' of undefined or null reference错误，则会开始提示该错误是由于组件配置错误所致。 它不是特定于Grid的，但确实会不时弹出，并且问题几乎总是归结为配置选项。

现在，要解决此特定问题，我建议您使用Ajax绑定而不是自定义绑定。 Ajax绑定非常易于使用，非常适合这种情况，在这种情况下，您希望将简单的Grid添加到页面中，而无需使用更高级的功能来获得更高级的配置。 另外，您可以与客户端模型一起为服务器端设置验证等（无需手动设置架构）。

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

首次实施任何新产品时，我总是建议您仔细阅读以下文档，并从较小的示例开始并在那里建立表单。 如果您要使用自定义数据源，那么我想说的是从更大的配置开始，然后删除片段，直到获得所需的最小片段。