How to create Hierarchy grid with a single datasource

[Yue]

Hi,

I managed to create a hierarchy grid like the demo https://demos.telerik.com/kendo-ui/grid/hierarchy with two remote json data sources.  I am wondering if there is a way to achieve the same (see attached screen shot) with a single remote json datasource as follows.  Thank you!

{
    "categories": [
       {
           "categoryName": "SciFi",
           "description": "SciFi movies since 1970",
           "movies": [
               { "title": "Star Wars: A New Hope", "year": 1977},
               { "title": "Star Wars: The Empire Strikes Back", "year": 1980},
               { "title": "Star Wars: Return of the Jedi", "year": 1983}
            ]
       },
       {
           "categoryName": "Drama",
           "description": "Drama movies since 1990",
           "movies": [
              { "title": "The Shawshenk Redemption", "year": 1994},
              { "title": "Fight Club", "year": 1999},
              { "title": "The Usual Suspects", "year": 1995}
           ]
       }
    ]
}

[Yue]

I found the solution:

            <div id="grid"></div>
            <script>
                    $("#grid").kendoGrid({
                        columns: [
                            {
                                field: "categoryName",
                                title: "Category",
                                width: "110px"
                            },
                            {
                                field: "description",
                                title: "Description",
                                width: "110px"
                            }
                        ],
                        dataSource:
                        {
                            transport: {
                                read: "https://www.example.com/categories.json",
                                dataType: "json"
                            },
                            schema: {
                               data: "categories"
                            },
                            pageSize: 4,
                            serverPaging: true,
                            serverSorting: true
                        },
                        height: 600,
                        sortable: true,
                        pageable: true,
                        detailTemplate: '<div class="grid"></div>',
                        detailInit: function(e) {
                          e.detailRow.find(".grid").kendoGrid({
                              dataSource: e.data.movies
                          });
                        }
                    });