Why is the "data (" kendogrid ")` undefined?

Question

I am a starter in kendo.ui, I wrote this code to create kendo.ui.grid

@(Html.Kendo().Grid<BrandViewModel>(Model) .Name("Grid") .Columns(columns => { columns.Bound(p => p.BrandName); columns.Bound(p => p.BrandAbbr); columns.Bound(p => p.SrcImage); columns.Command(command => command.Custom("Edit").Click("editItem")); }) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("CustomCommand_Read", "Brand")) .Model(model => model.Id(p => p.Id)) ) ) 

When the user clicks the edit button in the grid, he will display the Edit view in kendo.ui.window, and the user can edit the data.

 @(Html.Kendo().Window().Name("Details") .Title("Customer Details") .Visible(false) .Modal(true) .Height(400) .Draggable(true) .Width(300) .Events(events => events.Close("onClose")) ) <script type="text/x-kendo-template" id="template"> <div id="details-container"> <!-- this will be the content of the popup --> BrandName: <input type='text' value='#= BrandName #' /> </div> </script> <script type="text/javascript"> var detailsTemplate = kendo.template($("#template").html()); var windowObject; $(document).ready(function () { windowObject = $("#Details").data("kendoWindow"); }); function editItem(e) { e.preventDefault(); var dataItem = this.dataItem($(e.currentTarget).closest("tr")); windowObject.refresh({ url: "/Brand/Edit/" + dataItem.Id }); windowObject.center().open(); } function onClose(e) { var grid = $("#Grid").data("kendoGrid").dataSource.read(); } </script> 

but in onClose method $("#Grid").data("kendoGrid") is Undefined, please help me, thanks everyone

Answer 1

try window load event

 $(window).load(function () { var grid = $("#grid").data("kendoGrid"); 

this work is for me.

Answer 2

var grid = $ ("# Grid"). data ("kendoGrid"); // call the grid by the name of the grid that you used in the razor