Kendo Window with Grid shows empty grid

Question

I have 2 kendo window in 2 different pages with same grid content(url of partial view). these 2 pages are also partial views.And these 2 views are rendered in tabstrip. When open these two tabs, the window in second tab open with empty grid, any solution for this? help me please! this is my window,!

@(Html.Kendo().Window()
    .Name("headerWindow")
    .Title("Select Option")
    .Visible(false)
    .Draggable()
    .Width(500)
    .Height(300)
    //.LoadContentFrom("/asset/AccountGridPopup")
)

 </div>
<script>
$(document).ready(function () {
    var WindowForheader = $("#headerWindow").data("kendoWindow");
    $("#acountCode").dblclick(function () {
        //$("#accounttWindow").data("kendoWindow").center().open();

        orisWindoOpenForHeader("/AssetTransaction/AccountGridPopup");
        //alert("done");
    });
    function orisWindoOpenForHeader(url) {

        WindowForheader.refresh({
            url: url
        })
        WindowForheader.center().open();
    }
});

@Nicholas , content of windows are same, same grid, same data source — Ajith
You can't have more than one Kendo UI control having the same ID in a dom. Rendering the second control will then fail. Perhaps that's the issue. — Nicholas
@Nicholas, ya. how can i overcome this issue? can you suggest me a solution? — Ajith

Nicholas Nicholas · Accepted Answer · 2015-06-24T04:30:07

To dynamically create unique grids do something like this in your view:

@{
    var gridId = Guid.NewGuid().ToString();
}

<script>
    $("#@gridId").data("kendoGrid").bind("change", onAccountGridRowSelected);
</script>

@(Html.Kendo().Grid<MyModel>()
    .Name(gridId)
    .Columns(c =>
    {
    ...Etc
)

Kendo Window with Grid shows empty grid

1 Answers