The details template (has child grid) does not expand automatically when ClientRowTemplate is used

[KR]

Hi,
How to expand the detail template automatically when ClientRowTemplate is used? Here is the code I have. Not sure what is missing.

@(Html.Kendo().Grid<Models.ResViewModel>()
        .Name("grid")
        .HtmlAttributes(new { style = "height:550px; width:100%;" })
        .ClientRowTemplate(
            "<tr data-uid='#: uid #' class='k-master-row' role='row'><td class='k-hierarchy-cell' aria-expanded='true'><a class='k-icon k-i-collapse' href='\\#' aria-label='Collapse' tabindex='-1'></a></td>" +
                "<td>" +
                      "<div ><span><b>Name :</b></span> #: FullName# </div>" +
                      "<div >Contact Info/Comments : #: Comments# </div>" +
                      "<div >State : #: State# </div>" +
                      "<div >SRID : #: SRID# </div>" +
                "</td>" +
             "</tr>"
        )

        .ClientDetailTemplateId("questionTemplate")
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(1)
            .Model(model => model.Id(p => p.SID))
            .Read(read => read.Action("GetResponses", "SUser"))
        )
        .Events(events => events.DataBound("dataBound"))
        .Scrollable()
        .Pageable(pageable => pageable
                    .Refresh(false)
                    .ButtonCount(5))
)

<script id="questionTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Models.SQViewModel>()
            .Name("grid_#=State#")
            .Columns(columns =>
            {
                columns.Bound(o => o.SortOrder);
                columns.Bound(o => o.QuestionText);
            })
             .Pageable()
            // .AutoBind(true)
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Read(read => read.Action("DetailTemplate_HierarchyBinding_Questions", "SUser", new { surveyID = "#=SID#" }))
            )
            .Events(events => events.DataBound("dataBound"))
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
        this.expandRow(this.tbody.find("tr.k-detail-row").first());
    }
</script>

[Eyup]

Hi,

 

The inner grid has the same event definition which confuses the logic and invalidates the parent call:

.Events(events => events.DataBound("dataBound"))

Remove it from the detail grid's definition and the issue should be resolved.

 

Regards,
Eyup
Progress Telerik

[KR]

I removed the line of code for the event in questionTemplate. The detail template is till not automatically expanded. Is the auto expansion of detail grid supported when ClientRowTemplate  is used in the parent grid?

[Eyup]

Hello,

 

This should be possible. The working sample (without row template) is located here:
https://demos.telerik.com/aspnet-mvc/grid/hierarchy

The major difference I can see in the logic is this line:

this.expandRow(this.tbody.find("tr.k-detail-row").first());

Try to remove that and let me know if this fixes the issue. If not, I will prepare a new full working MVC sample using your exact Grid definition and send it to you.

 

Regards,
Eyup
Progress Telerik

[KR]

I removed the line of code you suggested. Doesn't help. If you could send me a sample, that would be great.

[Eyup]

Hi,

 

You can resolve the issue by using a different approach:

            dataBound: function(e) {
              var row = this.tbody.find("tr.k-master-row").first();
              row.find("a.k-i-expand").click();
            },

I've prepared a working live sample to demonstrate that:
https://dojo.telerik.com/IbIJeTOD/9

 

Regards,
Eyup
Progress Telerik

[KR]

The below worked for me. Thank you very much!

var grid = $("#grid").data("kendoGrid");
var row = grid.tbody.find("tr.k-master-row").first();
row.find("a.k-i-collapse").click();
this.expandRow(row);