Grid: Bind a ClientDetailTemplate to a collection in parent row

[Daniel Knoll]

Hi,

I have a Grid with a ClientDetailTemplate, which also contains a Grid. Currently the grid has to make a request to the server for each row the user expands. But actually I already have my data loaded in the grid and could provide it in a collection property on the parent row. Is it possible to tell the Childgrid in the template to get the data from the parent row instead of requesting it from the server?

Thanks in advance. 

[Dimiter Madjarov]

Hello David,


To skip the request to the server, you could set the dataSource of the detail Grid explicitly in the detailInit event of the master Grid.
E.g.

@(Html.Kendo().Grid<Customer>()
    .Name("Grid")
    ...
    .ClientDetailTemplateId("products")
    .Events(e => e.DetailInit("detailInit"))
    ...
)

<script id="products" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Product>()
               .Name("Products_#=Name#")
               .ToClientTemplate()
     )
</script>

<script>
    function detailInit(e) {
        var grid = $("#Products_" + e.data.Name).data("kendoGrid");
        grid.dataSource.data(e.data.Products);
    }
</script>

 

Kind regards,
Dimiter Madjarov
the Telerik team

[Daniel Knoll]

Hi,

I've tried it and it works, thank you ;)

On a different page I tried the same approach, but it didn't work. On this page I need all ClientDetailTemplates to be expanded, when the page is loaded. So I call this function in the document.ready handler:

function expandRows() {
    var grid = $('#commissionGrid').data('kendoGrid');

    var rows = grid.tbody.find('>tr.k-master-row');

    for (var i = 0; i < rows.length; i++) {
        grid.expandRow(rows.eq(i));
    }
}

When I use this function to expand all rows, I receive an exception in the detailInit handler. which says, the the dataSource on 'undefined' cannot be found. It seems like the Grid with the specified ID (#Products_+Name in your example) cannot be found at this point in time. I populate the grid with the "BindTo" method to my model, so I dont have to wait for an additional request to be finished.

Do you know what could be the problem here? Or is there another way to expand all rows when the page is loaded?

Greets

[Dimiter Madjarov]

Hello David,


To expand all master rows, you should bind to the dataBound event (on document ready is too early, because the grid data is not ready) and expand the rows using the expandRow method. Please note that it can also accept a collection of rows.
E.g.

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

function dataBound(e) {
    this.expandRow(this.tbody.find("> tr"));
}

  

Kind regards,
Dimiter Madjarov
the Telerik team

[Daniel Knoll]

Hi,

thank you again for your reply.

I've tried your solution but unfortunately it still seems to be too early to expand the rows. Maybe that's because I'm loading too much data?

I've also found something interesting:

function dataBound(e) {
    //expandAll(); // -> doesnt work
    setTimeout(function() { expandAll(); }, 1); // -> works
}

If I call the expand function directly, it doesnt work. But if I call it with an timeout of 1ms, it works.

I didnt find any event that occurs after the dataBound-event. So do you know a more elegant solution than the setTimeout function?

Greets.

[Dimiter Madjarov]

Hello David,


The code that I provided in my previous post is working on my side. The dataBound event is fired after the Grid has received the data. I am attaching a sample solution to demonstrate this. Could you take a look at it and let me know if it covers your scenario? If that is not the case, could you send me a sample project, where the issue is reproducing, so I could test it locally and assist you further?

 

Regards,
Dimiter Madjarov
the Telerik team

[Dawn]

I have attempted to implement the above however when I expand the row to see the detail and initdetail is called, but it doesn't seem to be able to find the grid.  I have checked and it is named correctly etc.  I have my main grid with initdetail specified, then this

 

<script id="PropertyChanges" type="text/kendo-tmpl">
    
@(Html.Kendo().Grid<AuditChangeDetailVM>()
.Name("gridAuditChanges_#=AuditID#")
.Columns(columns =>
{
columns.Bound(p => p.ChangeDescription);
})
.ToClientTemplate()
)
</script>

 

 

function detailInit(e) {

var grid = $("#gridAuditChanges_" + e.data.AuditID).data("kendoGrid"); 
            grid.dataSource.data(e.data.Changes);

}

[Boyan Dimitrov]

Hello Dawn,

In order to investigate this case we would need a runnable sample example of your scenario. At first sight the code seems fine and the Kendo UI Grid should be accessed successfully.  For example please take a look at the client-hierarchy example. In the detailInit event the child grid instance exists and can be accessed as demonstrated in the code below: 

 

.Events(ev => ev.DetailInit("detailInit"))

function detailInit(e) {
        var grid = $("#grid_" + e.data.CategoryID).data("kendoGrid");
    }

 

Regards,
Boyan Dimitrov
Telerik by Progress