DetailInit event not firing

[Dan]

I have a parent grid / child grid. and I can't seem to get the two working properly.  Using the DetailInit event to set the data for the child grid, but the event is not even firing.  The grids are server bound with a model.  Here is the razor code.  Thanks for the help.
Dan

​

@model IEnumerable<EquipmentsSummary>

<div class="info-row">
    @(Html.Kendo().Grid(Model)
        .Name("EquipmentGrid")
        .Columns(columns =>
        {
            columns.Bound(e => e.EquipName).Title("Item Name");
            columns.Bound(e => e.SerialNo).Title("Serial #");
            columns.Bound(e => e.AssetStatus).Title("Status");
            columns.Bound(e => e.AssetStatusDate).Title("Date");
        })
        .HtmlAttributes(new { style = "height: 390px;" })
        .Pageable(pageable => pageable
            .PageSizes(true).PageSizes(new int[] { 20, 50, 100 })
            .ButtonCount(5))
        .Sortable()
        .Filterable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false))
        .ClientDetailTemplateId("template")
        .Events(events => events.DetailInit("initDetail"))
    )

    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<EquipmentSettingsSummary>()
            .Name(string.Format("SettingGrid_#=ID#"))
            .Columns(columns =>
            {
                columns.Bound(e => e.EffectiveDate).Title("Date");
                columns.Bound(e => e.AssetStatus).Title("Status");
            })
            .HtmlAttributes(new { style = "height: 390px;" })
            .Pageable(pageable => pageable
                .PageSizes(true).PageSizes(new int[] { 20, 50, 100 })
                .ButtonCount(5))
            .Sortable()
            .Filterable()
            .Scrollable()
            .ToClientTemplate()
        )
    </script>
    <script>
        function initDetail(e) {
            alert("ID is " + e.data.ID);
            var grid = $("#SettingGrid_" + e.data.ID).data("kendoGrid");
            grid.dataSource.data(e.data.SettingItems);
        }
    </script>
</div>

[Alexander Popov]

Hi Dan,

This behavior is expected, because the detailInit event is not supposed to trigger when using server binding. In the current scenario I would recommend either using Ajax binding or moving the logic to the Grid's DetailExpand event.

Regards,
Alexander Popov
Telerik

 

 

[Dan]

Alexander,
With the server binding, the parent grid is not even showing the row expansion icons.  I modeled this code after several examples that I have seen in the forum, but it is just not working.

Any ideas?
Thanks.

[Alexander Popov]

Hello again Dan,

You can find working examples of a hierarchical Grid using both Server and Ajax binding in the Kendo UI installation path, under the \wrappers\aspnetmvc\Examples directory. The files you would be interested in are:

• Areas\razor\Views\grid\hierarchy.cshtml
• Controllers\Grid\HierarchyController.cs
• Areas\razor\Views\grid\serverhierarchy.cshtml
• Controllers\Grid\ServerHierarchyController.cs

Regards,
Alexander Popov
Telerik

 

 

[Dan]

Thank you.  The server binding example fixed my problem.

Dan

[Gary]

Hello

I am having the same issue as described in this post. I have an updated Telerik distribution and the examples folder is no longer available (at least under MVC Q2 2014\wrappers\aspnetmvc... How can I find the sample that was listed as the resolution to this issue?

Thanks

[Rosen]

Hello Gary,

 

Our records shows that you have downloaded the latest Q3 2015 (2015.3.930) version. Thus, you should check this installation folder. The sample application should be located under \wrappers\aspnetmvc\Examples.

 

Regards,
Rosen
Telerik