Grid detail datasource force refresh on expand.

4 posts, 0 answers
  1. Insomniac82
    Insomniac82 avatar
    18 posts
    Member since:
    Aug 2008

    Posted 04 Oct 2013 Link to this post

    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 = [];
    }
    }
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 08 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Insomniac82
    Insomniac82 avatar
    18 posts
    Member since:
    Aug 2008

    Posted 08 Oct 2013 Link to this post

    @(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>
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 10 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready