Nested grids with common data source

[Gary]

I am implementing a solution that uses nested grids to drill-down on an organization hierarchy. The entire organization is obtained from a single data source. I have found that the dataSource binding does not initialize when showing the detailTemplate.

I created the following minimal example to demonstrate the issue.

<div id="grid"></div>

 

<script>

    $(document).ready(function () {

        var dataSource = new kendo.data.DataSource({

            type: "odata",

            transport: {

                read: "http://demos.kendoui.com/service/Northwind.svc/Employees"

            }

        });

 

        var element = $("#grid").kendoGrid({

            dataSource: dataSource,

            columns: ["FirstName", "LastName"],

            height: 450,

            detailInit: detailInit,

            dataBound: function () {

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

            }

        });

    });

 

    function detailInit(e) {

        $("<div/>").appendTo(e.detailCell).kendoGrid({

            dataSource: dataSource,

            /*dataSource: {

                type: "odata",

                transport: {

                    read: "http://demos.kendoui.com/service/Northwind.svc/Employees"

                }

            },*/

            columns: ["FirstName", "LastName"],

            scrollable: false

        });

    }

</script>

This results in an error: dataSource is not defined.

If you comment out the dataSource property within detailInit and uncomment the one immediately afterwards, then it works.

In case it is relevant, this markup is being loaded via AJAX and inserted into the DOM via jQuery. 

My business need is to bind the main grid and the sub-grids to the same data source. It's not shown in the basic example, but this will be iterative to dozens of levels, so I really need to be able to use a single data source.

Thanks,
Gary

[Rosen]

Hello Gary,

The error you have described is caused by the fact that the dataSource variable is declared in the scope of the document ready handler, thus it is not available outside of this function scope. You should declare the variable in more global scope in order to be accessible form other functions.

Regarding the single DataSource hierarchy. I'm afraid that this is not supported, as you may know when data source is filtered all of the attached widgets will be rebound to reflect the changes. This will result in that all of the widgets in the hierarchy will show same data. 

Regards,
Rosen
the Telerik team

[Gary]

Thank you for explaining this. I did not know that the behavior of the data source is as you described, but it makes sense.