为什么`data（“kendoGrid”）`未定义？

Question

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

$("#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

两个网格何时显示与有问题的行执行时有什么区别？这意味着，对于有效的网格，它可能已经在行执行时初始化，对于有问题的网格，它不是吗？

Answer 2

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

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

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

Answer 3

刚刚遇到同样的问题。

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

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