为什么`data(“kendoGrid”)`未定义?

时间:2013-06-12 17:35:57

标签: telerik kendo-ui kendo-grid

我在局部视图中有两个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"))
                            )
)

唯一的区别是TerminalIndexItemLocationIndexItem' and and TerminalIndexModel versus LocationIndexModel , and of course the controller names in the CRUD definitions,终端versus位置`。我最终找到了两个网格之间的区别。

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

刚出现同样的问题。

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

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