Why is `data("kendoGrid")` undefined?

Question

I have two Kendo grid definitions, in partial views, that are exactly the same save for the partial view model and the grid item model. Only one of then gives me the JavaScript console error 'Cannot read property 'dataSource' of undefined' on the line of code:

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

and the other does not. It is not dataSource that is undefined, but $("#index-grid").data("kendoGrid"). Yet, in the other identical grid, I do not get this error. Can the data provided to the data source perhaps invalidate the grid itself? The grid definitions look like this:

@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"))
                            )
)

with the only difference being TerminalIndexItem versus LocationIndexItem' and andTerminalIndexModelversusLocationIndexModel, and of course the controller names in the CRUD definitions,TerminalversusLocation`. I am at my wit's end finding a difference between the two grids.

Answer 1

Is there any difference in when the two grids get displayed in relation to when the problematic line executes? Meaning, is it possible that for the grid that works, it is already initialized when the line executes, and for the problematic grid it is not?