Why Is `data(“kendogrid”)` Undefined?

I'm a starter in kendo.ui, I've written 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 grid it will show Edit view in kendo.ui.window and the user can edit 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 all