Kendo hierarchical grid MVC

[Kumar]

.ClientTemplate() is not working inside the child grid. I'm also posting the example explaining the issue.

 

This is the Parent grid:

                @(Html.Kendo().Grid(Model.DeliquencRulesGridVM)
                            .Name("deliquencRulesGridVM")
                            .Columns(columns =>
                            {
                                columns.Bound(c => c.Id).Hidden();

                                columns.Bound(c => c.RuleNumber)
                                .Title(@AonWrapStringResources.Deliquency_Label_RuleNumber)
                                .Width(200)
                                .HtmlAttributes(new { })
                                .Filterable(f => f.Extra(false)
                    .Messages(m => m.Info(@StringResources.Generic_GridFilter_Refine + " " + @AonWrapStringResources.Deliquency_Label_RuleNumber + ":")));

                            })
                    .ClientDetailTemplateId("deliquency-grid")
                    .Events(e => e
                        .DataBound("delinquency.gridDataBound")
                     )
                .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .PageSize(10)
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                        })
                        .ServerOperation(false)

                        )
                .Resizable(resize => resize.Columns(true))
        .Deferred()
        )

 

And this is the child grid in which .ClientTemplate() is not working.

<script id="deliquency-grid" type="text/kendo-tmpl">
            <div id="DeliquencyFollowUpGrid">
                <div class="grid-outside">
                    @(Html.Kendo().Grid(Model.DeliquencFollowUpGridVM)
                       .Name("deliquencFollowUpGridVM")
                      .Columns(columns =>
                      {
                           columns.Bound(c => c.Active)
                           .Title(@AonWrapStringResources.BrowseProgram_Label_Active)
                .Template(@<text></text>)
                                .HtmlAttributes(new { @class = "text-center" })
                                .ClientTemplate("Hello")
                                .Width(102);

                            })
                    .Events(e => e
                        .DataBound("delinquency.gridFollowUpDataBound")
                     )

                .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .PageSize(10)
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                        })
                        .ServerOperation(false)

                        )
                .Resizable(resize => resize.Columns(true))
        .Deferred()
        .ToClientTemplate()
        )
                </div>
            </div>

        </script>

 

Could you please help me on this. It would be much appreciated if you can help me on this.

 

[Petar]

Hi Kumar,

Are there any errors in the browser's console when you run the project that contains the shared Grid definition? 

What I assume is the problem of the shared code is the name of the Grid in the deliquency-grid template. Each Grid in the detail template should have a unique name like it is in this Hierarchy Grid Demo. You can click on the "View Source" tab and see the following definition:

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(110);
                columns.Bound(o => o.ShipCountry).Width(150);
                columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                columns.Bound(o => o.ShipName).Width(300);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script

The marked in yellow code adds a unique number to the name of each sub-Grid.

Check the linked example, add a unique name for the detail Grids, and let me know if this resolves the issue. 

Regards,
Petar
Progress Telerik

[Kumar]

Hi Petar,

 

Thanks for replying but unfortunately not resolved my problem.

In Child Grid I'm using this as per your example of unique grid id:

<script id="deliquency-grid" type="text/kendo-tmpl">
            <div class="grid-1-wrapper grid-with-total mh-5r mb-16">
                <div class="grid-outside">
                    @(Html.Kendo().Grid(Model.DeliquencFollowUpGridVM)
                       .Name("deliquencFollowUpGridVM_#=Id#")
                      .Columns(columns =>
                      {
                      columns.Bound(c => c.Id).Hidden();

                      columns.Bound(c => c.Active)
                           .Title(@AonWrapStringResources.BrowseProgram_Label_Active)
                .Template(@<text></text>)
                                .Filterable(false)
                                .Sortable(false)
                                .HtmlAttributes(new { @class = "text-center" })
                                .ClientTemplate(
                                "<input name='Active-#=Id#' id='Active-#=Id#' type='checkbox' class='k-checkbox bind-checkbox' data-column-key='Active' />" +
                                "<label class='k-checkbox-label' for='Active-#=Id#'></label>")
                                .Width(102);

                                columns.Bound(c => c.FollowUp)
                                .Title(@AonWrapStringResources.Deliquency_Label_FollowUp)
                                .Width(180)
                                .HtmlAttributes(new { })
                                .Filterable(f => f.Extra(false)
                    .Messages(m => m.Info(@StringResources.Generic_GridFilter_Refine + " " + @AonWrapStringResources.Deliquency_Label_FollowUp + ":")));

                            })

                .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .PageSize(10)
                        //.Read(read => read.Action("DeliquencyFollowUpData", "Deliquency"))
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                        })
                        .ServerOperation(false)

                        )
                .Resizable(resize => resize.Columns(true))
        .Deferred()
        .ToClientTemplate()
        )
                </div>
            </div>

        </script>
But after that I'm getting an error in my console. Could you please take a look on this. I'm also attaching the error file in it.

[Petar]

Hi Kumar,

Searching for the reported error, I found this forum thread that seems to discuss the same issue, in the same scenario you are working on. Can you check the linked discussion and see what the user Jako shared as the reason for the issue in his application? 

Do you have similar attribute definitions in the model of your project?

Regards,
Petar
Progress Telerik