Grid detail datasource force refresh on expand.

[Insomniac82]

How can I force the grid detail/template datasource to refresh in the detailExpand event handler?

function detailExpand(e) {
try { 
     var dataItem = e.sender.dataItem(e.masterRow);
     if ($.inArray(dataItem.Key, expanded) == -1) {
      expanded.push(dataItem.Key);
}
} catch (ex) {
expanded = [];
}
}

[Vladimir Iliev]

Hi Glen,

 
From the provided information it's not clear for us what is the exact setup that you have - could you please share your current Grid code and hierarchy template?

Kind Regards,
Vladimir Iliev
Telerik

[Insomniac82]

@(Html.Kendo().Grid<TransSuite.TIS.Common.DataContract.DeviceDetail>()
.Name("Grid")
.Groupable()
.Sortable()
.Selectable(sel => sel.Mode(GridSelectionMode.Multiple))
.Scrollable(sc => sc.Enabled(true))
.HtmlAttributes(new { style = "height: 100%; " })
.Columns(columns =>
{
// Be sure to change the column span variables when adding or removing columns
columns.Bound(p => p.OrgName).Width(75).Title("Org").HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.IntId).Width(50).Hidden(true);
columns.Bound(p => p.ExtId).Width(50).Title("Id").HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.Name).Width(250).HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.CommStatus).Width(100).Title("Comm").HtmlAttributes(new { @class = "#= CommStatusStyle #" }).HtmlAttributes(new { style = "text-align:center;" });
columns.Bound(p => p.DisplayStatus).Width(100).Title("Display").HtmlAttributes(new { @class = "#= DisplayStatusStyle #" }).HtmlAttributes(new { style = "text-align:center;" });
columns.Bound(p => p.HardwareStatus).Width(100).Title("Hardware").HtmlAttributes(new { @class = "#= HardwareStatusStyle #" }).HtmlAttributes(new { style = "text-align:center;" });
columns.Bound(p => p.Phase1).Width(135).Title("Phase 1").HtmlAttributes(new { style = "text-align:center;" }).Encoded(false).ClientTemplate("#= getHtmlNewLinesString(Phase1) #");
columns.Bound(p => p.Phase2).Width(135).Title("Phase 2").HtmlAttributes(new { style = "text-align:center;" }).Encoded(false).ClientTemplate("#= getHtmlNewLinesString(Phase2) #");
columns.Bound(p => p.Phase3).Width(135).Title("Phase 3").HtmlAttributes(new { style = "text-align:center;" }).Encoded(false).ClientTemplate("#= getHtmlNewLinesString(Phase3) #").Hidden(true);
columns.Bound(p => p.Phase4).Width(135).Title("Phase 4").HtmlAttributes(new { style = "text-align:center;" }).Encoded(false).ClientTemplate("#= getHtmlNewLinesString(Phase4) #").Hidden(true);
columns.Bound(p => p.Phase5).Width(135).Title("Phase 5").HtmlAttributes(new { style = "text-align:center;" }).Encoded(false).ClientTemplate("#= getHtmlNewLinesString(Phase5) #").Hidden(true);
columns.Bound(p => p.Phase6).Width(135).Title("Phase 6").HtmlAttributes(new { style = "text-align:center;" }).Encoded(false).ClientTemplate("#= getHtmlNewLinesString(Phase6) #").Hidden(true);
columns.Bound(p => p.Description).Width(250).HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.Direction).Width(35).Title("Dir");
columns.Bound(p => p.Route).Width(75).HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.MilePost).Width(55).Title("MP");
columns.Bound(p => p.LocationReference).Width(125).Title("LRS");
columns.Bound(p => p.MonitorOnly).ClientTemplate("# if(MonitorOnly) { # <img src='" + Url.Content("~/Images/Check.ico") + "' style='width:16px; height:16px;'/> # } else { '' } #").Width(50).Title("M/O").HtmlAttributes(new { style = "text-align:center;" });
columns.Bound(p => p.HybridMode).ClientTemplate("# if(HybridMode) { # <img src='" + Url.Content("~/Images/Check.ico") + "' style='width:16px; height:16px;'/> # } else { '' } #").Width(50).Title("Hyb").HtmlAttributes(new { style = "text-align:center;" });
columns.Bound(p => p.Command).Width(125).HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.Source).Width(125);
columns.Bound(p => p.Start).Width(145).HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.Finish).Width(145).HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.Scheduler).Width(50).ClientTemplate("# if(Scheduler) { # <img src='" + Url.Content("~/Images/Check.ico") + "' style='width:16px; height:16px;'/> # } else { '' } #").HtmlAttributes(new { style = "text-align:center;" });
columns.Bound(p => p.ChannelId).Width(50).Title("Id").HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.ChannelName).Width(260).Title("Name").HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.ChannelDrop).Width(50).Title("Drop");
columns.Bound(p => p.ChannelCommPath).Width(275).Title("Last Comm Path Used").HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(p => p.DeviceType).Width(200).HtmlAttributes(new { style = "white-space:nowrap;" });
})
.ClientDetailTemplateId("template")
.Events(e => e.Change("change").DataBound("dataBound").DetailExpand("detailExpand").DetailCollapse("detailCollapse"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(device => device.Key))
.Read(read => read.Action("DeviceDetail_Read", "Home"))
)
.Resizable(resize => resize.Columns(true))
)

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<TransSuite.TIS.Common.DataContract.DeviceSource>()
.Name("Grid_#=SiteId##=IntId#")
.HtmlAttributes(new { style = "min-height: 200px; width: 1100px; " })
.Columns(columns =>
{
columns.Bound(d => d.Enabled).Width(65).ClientTemplate("\\# if(Enabled > 0) { \\# <img src='" + Url.Content("~/Images/Check.ico") + "' style='width:16px; height:16px;'/> \\# } else { '' } \\#").HtmlAttributes(new { style = "text-align:center;" });
columns.Bound(d => d.Source).Width(150).HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(d => d.Requestor).Width(150).HtmlAttributes(new { style = "white-space:nowrap;" });
columns.Bound(d => d.Confirm).Width(65).ClientTemplate("\\# if(Confirm > 0) { \\# <img src='" + Url.Content("~/Images/Check.ico") + "' style='width:16px; height:16px;'/> \\# } else { '' } \\#").HtmlAttributes(new { style = "text-align:center;" });
columns.Bound(d => d.Phase1).Width(150).HtmlAttributes(new { style = "text-align:center;" }).Encoded(false).ClientTemplate("\\#= getHtmlNewLinesString(Phase1) \\#");
columns.Bound(d => d.Phase2).Width(150).HtmlAttributes(new { style = "text-align:center;" }).Encoded(false).ClientTemplate("\\#= getHtmlNewLinesString(Phase2) \\#");
columns.Bound(d => d.Begin).Width(150).HtmlAttributes(new { style = "white-space:nowrap;" }).Format("{0:MM/dd/yyyy HH:mm}");
columns.Bound(d => d.End).Width(150).HtmlAttributes(new { style = "white-space:nowrap;" }).Format("{0:MM/dd/yyyy HH:mm}");
})
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("DeviceSources_Read", "Home", new { siteId = "#=SiteId#", intId = "#=IntId#" }))
)
.ToClientTemplate()

)
</script>

[Vladimir Iliev]

Hi Glen,

 
You can refresh the child Grid in the following way:

function onDetailExpand(e) {
    var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid");
    grid.dataSource.read();
}

Kind Regards,
Vladimir Iliev
Telerik