Kendo Grid Detail Template Grid Not Binding (after first row)

[BR Developer]

The detail template grid is not binding the data properly. If I expand one by one from top to bottom, it only binds the data for the first row and the grid inside all other rows are empty. If I expand them from bottom to top, it binds the data properly for all the rows. Any idea why it's doing this?

@(Html.Kendo().Grid<EmailInvitationViewModel>()
                            .Name("EmailInviteeGrid")
                            .Columns(columns =>
                            {
                                columns.Bound(e => e.EmailInviteID).Hidden(true);
                                columns.Bound(e => e.InvitationDate).Title("Invited On").Hidden(false);
                                columns.Bound(e => e.ClassDetails).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).Title("Class Details");
                            })
                            .Sortable()
                            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                            .Pageable(pageable => pageable
                              .Refresh(true)
                              .PageSizes(true)
                              .ButtonCount(5))
                            .ClientDetailTemplateId("template")
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(10)
                                .Read(read => read.Action("GetAllInvitedEvents", "Controller", new { Model.EventID }))
                            ))
                        )
    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<EmailInvitationViewModel>()
        .Name("grid_#=EmailInviteID#") 
        .Columns(columns =>
        {
            columns.Bound(o => o.GridInviteeEmail);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
        .Read(read => read.Action("GetAllInviteeEmailsByEvent", "DataSource", new { EventID = "#=EventID#", EmailInviteID = "#=EmailInviteID#" }))
        )
        .Pageable()
        .Sortable()
        .ToClientTemplate()
                        )
    </script>

[Xenophon]

Thank tou for that and do understand rhis part. But try expqnd all in child grid. Not the first or last all of rhem. You will see if that on all child rows are populated. 

Therefore you have to use jQuery to pipulate the child grid. We jave solved this by amnesi g the older version by tweeking th code a bit.

i would like to see what ypur solution is. I will share once you have posted a solution.

Thanks

Kind Regards Xen

[Xenophon]

Sorry typing on the phone. I meant to say that not all records are populated in tbe child grid at first.  

[Anton Mironov]

Hi Xenophon,

Feel free to correct me if I misunderstood something. The needed result is to expand all the rows of the parent Kendo UI Grid?

If this is the case, I would recommend using the "DataBound" Event of the Grid. 

In the Event handler use the following for expanding all the rows:

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

Here is a dojo example of the pointed approach:

• https://dojo.telerik.com/@anton.mironov/IYINEcih

I hope this information helps. Let me know if further assistance or information is needed.

Looking forward to hearing back from you.

Best Regards,
Anton Mironov

[Stefan]

Hello Team,

The provided configuration looks good.

Based on it I can assume that values different than the expected ones are passed to the GetAllInviteeEmailsByEvent action.

I can suggest inspecting if the correct values are received in the Controller action, and then if the Controller is returning the expected values based on the expanded row.

If all values are as expected, please provide a fully runnable example as the issue may be caused by a custom factor which we are overlooking at this moment.

Regards,
Stefan
Progress Telerik

[Jay]

Even I have the same issue. It was used to work fine and after taking new kendo version and Jquery upgrade it stop working. Is still working fine with my other branch with older kendo version. Is there any thing change in the new kendo approach ? example, i have 3 different id records in the child but after going inside kendo function all 3 times its duplicating same id.

[Anton Mironov]

Hi Jay,

I have answered your inquiry in support ticket #1525217.

I am currently trying to replicate the pointed faulty behavior. Here is a dojo example with the pointed versions(Kendo UI 2021.2.511 and jQuery 3.5.1):

https://dojo.telerik.com/@anton.mironov/AvOkojUJ

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

Looking forward to hearing back from you. Once I have a runnable sample locally, I will debug and try my best to resolve this one and send it back in this thread.

 

Kind Regards,
Anton Mironov
Progress Telerik

[BR Developer]

Got it to work! The name of the sub-grid had to be unique for each master row.

[Xenophon]

I am having the same problem. @BR Developer could you elaborate a little on what you did. Show me what you did in the code. 

Tx.

[Anton Mironov]

Hi Xenophon,

The following demo represents the needed implementation and result:

• https://demos.telerik.com/aspnet-mvc/grid/hierarchy

In the View Source tab of the demo, take a look at the Name of the child grid. It is its Id and using a property of the master row of the parent Grid, makes the Id of the child unique:

 .Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context

I hope this information helps.

Let me know if further information or assistance is needed.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov

[Xenophon]

Hi Anton, 

Thank you for your reply. I have to correct you unfortunately or rather steer you in the right direction. 

The example you presented works, however I am referring to a grid that has parent and child rows. The child grid does not populate when you expand all. There is more that you need to do to get all children populated when all parent child rows are  expanded.

So use ASP.NET MVC Grid. Create a parent and child grid. Populate all parent and child rows. Then open the Grid expanding all parent and child rows. You will notice that the first row in the child grid is populated and the the remainder of the child rows are not populated.

I have a POC project if want a copy of this. But I would like to see what you come up with first

Thanks for communication and interaction.

Kind Regards, 

Xen

[Anton Mironov]

Hi Xenophon,

Thank you for the additional details provided.

I made a couple of tests locally and replicate the pointed behavior by populating only the first child Kendo UI Grid. This happens when the Name of the Child is using an incorrect field of the parent Grid. Here is how it have to look in order to work with the example that I prepared for the case:

<div class="row">
    <div class="col-12">
        @(Html.Kendo().Grid<TelerikMvcApp43.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .ClientDetailTemplateId("template")
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )
    </div>
</div>

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<TelerikMvcApp43.Models.OrderViewModel>()
            .Name("grid_#=OrderID#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.OrderID).Width(110);
                columns.Bound(o => o.ShipName).Width(300);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>

Attached is a sample project that I prepared for the case. It includes the working approach above.

Make the needed tests locally with the project attached and let me know if further information or assistance is needed.

Looking forward to hearing back from you.

Best Regards,
Anton Mironov

[Xenophon]

Hi Anton, 

Thank you for your effort. What I wanted to see is when on the landing page, index.cshtml, that all rows are expanded automatically. This was not present, but i can see your code is very close to achieving this.  

Our code was:

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

I have taken you code and instead of using a button to expland all I use a IIFE. See below:

    $(document).ready(function () {
        // Give Kendo some time reload
        setTimeout(() => {
            var grid = $("#grid").data("kendoGrid");
            $(".k-master-row").each(function (index) {
                grid.expandRow(this);
            });
        }, 1500)
    });

This will give time for the Kendo component to load.

I do have a question though, What event would you use to run this script when the Component is finished loading, instead of using a timeout function. DataBound creates it's own problems in our scenario.

 

Thanks again

Xen

 

 

 

[Anton Mironov]

Hi Xenophon,

Thank you for the additional details provided.

In order to achieve the desired behavior, I would recommend using the "DataBound" Event of the Kendo UI Grid.

Here is an example:

// In the parent Grid:
.Events(e => e.DataBound("onDataBound"))

// The Event handler:
    function onDataBound() {
        var grid = $("#grid").data("kendoGrid");
        setTimeout(function () {
            $(".k-master-row").each(function (index) {
                grid.expandRow(this);
            });
        })
    }

Attached is a sample project that implements the approach above.

Make the needed tests locally with the project attached and let me know if further assistance is needed.

Kind Regards,
Anton Mironov

 

[Xenophon]

Thank you Anton, 

That works perfectly. Thank you for your effort and suggestions. 

[Anton Mironov]

Hi Xenophon,

Thank you for the kind words.

If further assistance or information is needed, do not hesitate to contact me and the team.

Greetings,
Anton Mironov