为什么 `data("kendoGrid")` 未定义？

Question

我有两个 Kendo 网格定义，在局部视图中，除了局部视图模型和网格项模型外，它们完全相同。只有其中一个在代码行上给了我 JavaScript 控制台错误“无法读取未定义的属性 'dataSource'”：

$("#index-grid").data("kendoGrid").dataSource.bind("change", function (e) {...})

而另一个则没有。未定义的不是dataSource，而是$("#index-grid").data("kendoGrid")。然而，在另一个相同的网格中，我没有收到这个错误。提供给数据源的数据可能会使网格本身无效吗？网格定义如下所示：

@model TerminalIndexModel
@using Kendo.Mvc.UI
@using ParkPay.Helm.ViewModels
@(Html.Kendo().Grid<TerminalIndexItem>()
                .Name("index-grid")
                .Columns(columns =>
                            {
                                columns.Bound(p => p.Name);
                                columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsActive ? checked='checked':'' # class='chkbx' />").Title("Active").Width(70);
                                columns.Bound(p => p.Remarks);
                                columns.Command(cmd => cmd.Destroy()).Width(80);
                            })
                .ToolBar(toolbar =>
                {
                    toolbar.Create();
                    toolbar.Save();
                })   
                .HtmlAttributes(new { style = "height: 480px;"})                                                        
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Filterable()
                .Pageable()
                .Scrollable()
                .Sortable()
                .Resizable(resize => resize.Columns(true))
                .Reorderable(reorder => reorder.Columns(true))
                .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .ServerOperation(false)
                                        .Batch(true)
                                        .PageSize(20)
                                        .Events(events => events.Error("kendoGridErrorHandler"))
                                        .Model(model => model.Id(p => p.Id))
                                        .Read(read => read.Action("Read", "Terminal"))
                                        .Update(update => update.Action("BatchUpdate", "Terminal"))
                                        .Create(create => create.Action("BatchCreate", "Terminal"))
                                        .Destroy(destroy => destroy.Action("BatchDelete", "Terminal"))
                            )
)

唯一的区别是 TerminalIndexItem 与 LocationIndexItem' and andTerminalIndexModelversusLocationIndexModel, and of course the controller names in the CRUD definitions,TerminalversusLocation`。我无法找到两个网格之间的差异。

Answer 1

刚刚遇到同样的问题。

奇怪的是，即使在页面加载后启动了 javascript 代码（使用 $(function() {...})），似乎还不能从客户端访问网格。

解决方案：您需要在网格初始化（@Html.Kendo.Grid(...)）之后放置您的 javascript 代码块。

Answer 2

两个网格的显示时间与问题行的执行时间有什么不同吗？意思是，是否有可能对于有效的网格，它在行执行时已经初始化，而对于有问题的网格，它不是？

Answer 3

Kendo UI HtmlHelper 扩展的 Name() 用作其相应 HTML 元素的id HTML 属性。 id 属性在当前页面中必须是唯一的。如果您两次渲染相同的局部视图，两个网格最终将具有相同的id 属性。结果，只有第一个网格将被初始化。确保页面中的所有 HTML 元素都具有唯一 ID。这可以通过在 Name() 中附加一些后缀来完成：

@(Html.Kendo().Grid<TerminalIndexItem>()
      .Name("index-grid" + ViewData["suffix"])

可以在呈现局部视图的操作方法中设置此后缀。