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错误无法获取属性＆＃39; nodeName＆＃39;未定义或空引用

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

点击＆＃34;添加新行＆＃34;工具栏按钮导致另一个JS错误（与上面相同）

问题：我错过了网格上的配置选项吗？根据文档，这应该是开箱即用的＃34;。我想要实现的只是一个简单的网格，每次点击＆＃34;添加＆＃34;按钮。

Answer 1

虽然一开始看起来有点困难，但使用Custom()配置需要的不仅仅是设置.Schema()配置。您可以参考Custom DataSource documentation article中的示例来获取对此的引用。每个样本都至少使用read配置集定义的传输字段，以便DataSource知道在何处读取数据。

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

快速说明一下，如果您在Telerik网站上搜索错误unable to get property 'nodeName' of undefined or null reference，则会开始明白此错误是由于组件配置错误造成的。它不是特定于网格，但它会不时弹出，问题几乎总是归结为配置选项。

现在，为了解决这个问题，我建议使用Ajax binding而不是自定义绑定。 Ajax绑定非常简单，非常适合这种场景，您希望在页面中添加简单的Grid，而不需要使用更高级的功能来实现更高级的配置。此外，您可以使用客户端模型为服务器端设置验证等（无需手动设置架构）。

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

首次实施任何新产品时，我总是建议密切关注文档，并从较小的示例开始，然后在那里构建表单。如果您正在寻找使用自定义数据源，那么我说从更大的配置开始并删除部分，直到您获得您正在寻找的最小部分。

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

1 个答案: