7

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

Pouya
  • 1,908
  • 17
  • 56
  • 78
  • totally random guess... after .Name("Grid") and .ID("Grid") – Robert Levy Aug 11 '13 at 19:34
  • @ Robert Levy : ID is Undefined property in kendo.ui.grid. – Pouya Aug 11 '13 at 19:38
  • Are you sure that $('#Grid').length returns > 0? – Shion Aug 12 '13 at 08:33
  • 1
    Add `debugger;` to your onClose() method, then try $('#Grid') in the console, making sure that comes back with the element you expect. Then try $('#Grid').data() in the console. Continue to debug in this manner. – Timothy Walters Aug 15 '13 at 00:45
  • @ Timothy Walters:When I run the first and click in Edit button grid refresh but when I click again on a new record for editing when close popup window $('#Grid') is Undefined. – Pouya Aug 17 '13 at 17:12
  • I think your window is in a frame, so it is a different page, try getting all grids with $(".k-grid"), if it is empty (length==0) then no grids. Or try to put the grid pointer in a global var – maiconmm Nov 13 '13 at 10:48
  • 1
    Have you ever solved this? I have the same problem atm :/ – Viet Norm Jan 07 '14 at 15:21

2 Answers2

10

try Window load event 

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

this work for me.

Sagar Kulkarni
  • 636
  • 9
  • 24
0

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

fistandantis
  • 21
  • 1
  • 3