Is it possible to set the nested grid of a parent grid in a variable with Kendo UI?

Question

I have a two grids, one embedded in the other. Originally, the sample I worked with looks like:

$(document).ready(function() {
 var elementMasterInfo = $("#gridMasterInfo").kendoGrid({
     dataSource: {
         type: "odata",
         transport: {
             read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                    },
         pageSize: 6,
     },
     height: 430,
     detailInit: detailInit,
     columns: [ ... columns here... ]
 });     
});

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: dataSource,
        columns: [ ... columns here ... ]
    })
}

And this works fine. What i was wondering is how can I set the embedded grid in a variable like the first and then append that in the detailInit function... like this (which doesn't work):

var innerGrid = $("#divInnerTasks").kendoGrid({
    dataSource: dataSource,
    columns: [ ... columns here ... ]
});

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).innerGrid;        
}

What can I do to make this work? Appreciate the time!

Answer 1

Not sure I understand your question. A nested grid is created for each row of the parent grid so you cannot use a constant identifier as you propose (#divInnerTasks). Next, what is dataSource for the details, is it always the same data? The idea is that the data for the inner grid is variable and depending on each parent row.– OnaBai

Answer 2

Since my original comment has been proposed as answer, I'm proving it as such with some additional information.

A nested grid is created for each row of the parent grid so you cannot use a constant identifier as you propose (#divInnerTasks) in the original question as placeholder for it.

In addition, the dataSource for the details uses to be something dependent on the parent row. The idea is that the data for the inner grid is variable and changes for each parent row.

Example: parent grid are invoices and inner grid is the description of each of the products sold, with amount and price.

But the details doesn't have to be another grid, you can have only some columns shown as the original data and then use the rest of the information as details.

Example: The grid include your contacts. In the parent row you only show First and Last Name, in the detail view you show phone and e-mail address (http://jsfiddle.net/OnaBai/wPedb/).

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    detailInit: function(e) {
        // This is actually not the best way of showing data that is part of the
        // original row, this is just for example
        var template = kendo.template ($("#template").html())(e.data);
        e.detailRow.html(template);
    },
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" },
        { field: "City", width: 200 }
    ]
}).data("kendoGrid");