Kendo Hierarchical Grids reload data of first opened details grid - kendo-grid

Question

I got 2 grids in hierarchy:
#(Html.Kendo().Grid<Model>()
.Name("Obj")
.Columns(columns =>
{
columns.Bound(p => p.ResID).Title("ID").Width(50);
columns.Bound(p => p.Organization).EditorTemplateName("DropdownSupplier").ClientTemplate("#= Organization.Value #").Title("Supplier").Width(160);
columns.Bound(p => p.ResourceType).EditorTemplateName("DropdownResourceType").ClientTemplate("#=ResourceType.Value#").Title("Resource Type").Width(100);
columns.Bound(p => p.ResourceName).Title("Description").Width(150);
columns.Bound(p => p.Quantity).EditorTemplateName("Double").Title("Quantity").Width(120);
columns.Bound(p => p.QuantityUOM).EditorTemplateName("DropdownQuantityUOM").ClientTemplate("#=QuantityUOM.Value#").Title("Quantity UOM").Width(80);
columns.Bound(p => p.Area).ClientTemplate("#= Area.Value #").EditorTemplateName("DropdownAreas").Title("Area of Operation").Width(120);
columns.Bound(p => p.OrderDate).EditorTemplateName("DateTimeSmaller").Title("Order Date").Format("{0:" + format + "}").Width(170);
columns.Bound(p => p.ETA).EditorTemplateName("DateTimeSmaller").Title("ETA").Format("{0:" + format + "}").Width(170);
columns.Bound(p => p.Arrived).EditorTemplateName("Checkbox").Title("Arrived").ClientTemplate("<input type='checkbox' #= Arrived ? checked='checked' : '' # onchange='UpdateResourceArrived(this, \"#=ResourceID#\")' ></input>").Width(60);
columns.Bound(p => p.Status).ClientTemplate("#=Status.Value#").EditorTemplateName("DropdownStatus").Title("Status").Width(100);
columns.Bound(p => p.IsTactical).EditorTemplateName("Checkbox").Title("Tactical").ClientTemplate("<input type='checkbox' #= IsTactical ? checked='checked' : '' # ></input>").Width(60);
columns.Bound(p => p.ResourceID).Title("Resource").HtmlAttributes(new { style = "font-size:1px;" }).Width(1).Hidden(true);
})
.ToolBar(toolbar =>
{
//toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Navigatable()
.Filterable()
.Events(e =>
{
e.Edit("removeValidation");
e.FilterMenuInit("initCheckboxFilter");
e.Change("onSelectedRowChange");
e.DataBound("ResourcesDataBound");
})
.Excel(x => x.FileName("ICS_201-4_IncidentResources.xlsx").AllPages(true).Filterable(true).ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
.Sortable()
.Scrollable(scrollable => scrollable.Height("auto"))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events =>
{
events.Error("error_handler");
})
.Model(model =>
{
model.Id(p => p.ResourceID);
model.Field(p => p.ResID).Editable(false);
model.Field(p=>p.Arrived).Editable(false);
model.Field(p => p.Status).DefaultValue(
ViewData["defaultStatus"] as MinifiedKeyValueModel);
model.Field(p => p.Area).DefaultValue(
ViewData["defaultAreas"] as MinifiedKeyValueModel);
model.Field(p => p.Organization).DefaultValue(
ViewData["defaultSupplier"] as MinifiedKeyValueModel);
model.Field(p => p.ResourceType).DefaultValue(
ViewData["defaultResourceType"] as MinifiedKeyValueModel);
model.Field(p => p.QuantityUOM).DefaultValue(
ViewData["defaultQuantityUOM"] as MinifiedKeyValueModel);
})
.Read(read =>
read.Action("Resources_Read", "ICSForms")
.Data("filterByPeriod")
)
.Create("Resources_Create", "ICSForms")
.Update(x=>x.Action("Resources_Update", "ICSForms"))
.Destroy(destroy => destroy.Action("Resources_Destroy", "ICSForms")).AutoSync(true)
)
.ClientDetailTemplateId("rTemplate")
)
and:
<script type="text/kendo" id="rTemplate">
#(Html.Kendo().Grid<Model>()
.Name("childObj")
.Columns(columns =>
{
columns.Bound(p => p.ResID).Title("ID").Width(50);
columns.Bound(p => p.Organization).ClientTemplate("\\#=Organization.Value\\#").Title("Supplier").Width(160);
columns.Bound(p => p.ResourceType).ClientTemplate("\\#=ResourceType.Value\\#").Title("Resource Type").EditorTemplateName("DropdownResourceType").Width(100);
columns.Bound(p => p.ResourceName).Title("Description").Width(150);
columns.Bound(p => p.Quantity).EditorTemplateName("Double").Title("Quantity").Width(120);
columns.Bound(p => p.QuantityUOM.Value).EditorTemplateName("DropdownQuantityUOM").ClientTemplate("#=QuantityUOM.Value#").Title("Quantity UOM").Width(80);
columns.Bound(p => p.Area).ClientTemplate("\\#=Area.Value\\#").EditorTemplateName("DropdownAreas").Title("Area of Operation").Width(120);
columns.Bound(p => p.OrderDate).EditorTemplateName("DateTimeSmaller").Title("Order Date").Width(170).Format("{0:" + DependencyResolver.Current.GetService<IAP.Helpers.IApplicationOptionsProvider>().GetDataFormat(false, true) + "}"); ;
columns.Bound(p => p.ETA).EditorTemplateName("DateTimeSmaller").Title("ETA").Width(170).Format("{0:" + DependencyResolver.Current.GetService<IAP.Helpers.IApplicationOptionsProvider>().GetDataFormat(false, true) + "}"); ;
columns.Bound(p => p.Arrived).EditorTemplateName("Checkbox").Title("Arrived").ClientTemplate("<input type='checkbox' \\#= Arrived ? checked='checked' : '' \\# onchange='UpdateResourceArrived(this, \"#=ResourceID#\")' ></input>").Width(60);
columns.Bound(p => p.Status).ClientTemplate("\\#=Status.Value\\#").EditorTemplateName("DropdownStatus").Title("Status").Width(100);
columns.Bound(p => p.IsTactical).EditorTemplateName("Checkbox").Title("Tactical").ClientTemplate("<input type='checkbox' \\#= IsTactical ? checked='checked' : '' \\# ></input>").Width(60);
columns.Bound(p => p.ResourceID).Title("Resource").HtmlAttributes(new { style = "font-size:1px;width:1px;max-width:1px;" }).Width(1).Hidden(true);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Navigatable()
.Filterable()
.Events(e =>
{
e.Edit("removeValidation");
e.FilterMenuInit("initCheckboxFilter");
e.Change("onSelectedRowChange");
})
.Sortable()
.Scrollable(scrollable => scrollable.Height(120))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.ResourceID);
model.Field(p => p.ResourceID).Editable(false);
model.Field(p => p.ResID).Editable(false);
model.Field(p => p.Status).DefaultValue(
ViewData["defaultStatus"] as MinifiedKeyValueModel);
model.Field(p => p.Area).DefaultValue(
ViewData["defaultAreas"] as MinifiedKeyValueModel);
model.Field(p => p.Organization).DefaultValue(
ViewData["defaultSupplier"] as MinifiedKeyValueModel);
model.Field(p => p.ResourceType).DefaultValue(
ViewData["defaultResourceType"] as MinifiedKeyValueModel);
model.Field(p => p.QuantityUOM).DefaultValue(
ViewData["defaultQuantityUOM"] as MinifiedKeyValueModel);
})
.Read(read =>
read.Action("ResourcesChildren_Read", "ICSForms",
new { resourceID = "#=ResourceID#" }))
.Update(update => update.Action("Resources_Update", "ICSForms"))
.Destroy(destroy => destroy.Action("Resources_Destroy", "ICSForms")).AutoSync(true)
).ToClientTemplate()
)
</script>
The problem is that if I open the details of one of the rows and I see everything that has that parent (so far so good) and I open another details grid it opens an empty one and the first one refreshes its data with the ids of the second opened element.
I researched this issue, but I couldn't find similar occurrences. Any help solving this would be much appreciated.

Answer 1

You need a unique name for every instance of a grid.
<script type="text/kendo" id="rTemplate">
#(Html.Kendo().Grid<Model>()
.Name("childObj_#=ResID#") //Assuming ResID is the parent model's ID (I think #=id# would work as well if you have set the Id in the model)
[...]
If you use $("#childObj") anywhere, you will have to refactor that somehow.