This is a migrated thread and some comments may be shown as answers.

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

2 Answers 298 Views
Grid
This is a migrated thread and some comments may be shown as answers.
BR Developer
Top achievements
Rank 1
BR Developer asked on 10 Aug 2017, 07:56 PM

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
Top achievements
Rank 1
commented on 21 Mar 2022, 02:18 PM

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
Top achievements
Rank 1
commented on 21 Mar 2022, 02:20 PM

Sorry typing on the phone. I meant to say that not all records are populated in tbe child grid at first.  
Anton Mironov
Telerik team
commented on 23 Mar 2022, 01:57 PM

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:

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

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 14 Aug 2017, 12:02 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Jay
Top achievements
Rank 1
commented on 23 Jun 2021, 06:11 PM

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
Telerik team
commented on 25 Jun 2021, 10:54 AM

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
0
BR Developer
Top achievements
Rank 1
answered on 15 Aug 2017, 03:55 PM
Got it to work! The name of the sub-grid had to be unique for each master row.
Xenophon
Top achievements
Rank 1
commented on 17 Mar 2022, 03:55 PM

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
Telerik team
commented on 21 Mar 2022, 02:02 PM

Hi Xenophon,

The following demo represents the needed implementation and result:

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
Top achievements
Rank 1
commented on 24 Mar 2022, 08:39 AM | edited

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
Telerik team
commented on 28 Mar 2022, 06:31 AM

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
Top achievements
Rank 1
commented on 28 Mar 2022, 11:01 AM

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
Telerik team
commented on 30 Mar 2022, 06:44 AM

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
Top achievements
Rank 1
commented on 31 Mar 2022, 12:17 PM

Thank you Anton, 

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

Anton Mironov
Telerik team
commented on 04 Apr 2022, 08:26 AM

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

Tags
Grid
Asked by
BR Developer
Top achievements
Rank 1
Answers by
Stefan
Telerik team
BR Developer
Top achievements
Rank 1
Share this question
or