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

3 posts, 0 answers
  1. Dev
    Dev avatar
    4 posts
    Member since:
    Jan 2015

    Posted 10 Aug 2017 Link to this post

    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>

  2. Stefan
    Admin
    Stefan avatar
    3072 posts

    Posted 14 Aug 2017 Link to this post

    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.
  3. Dev
    Dev avatar
    4 posts
    Member since:
    Jan 2015

    Posted 15 Aug 2017 in reply to Stefan Link to this post

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