All Components

HierarchicalDataSource Overview

The HierarchicalDataSource extends the DataSource component.

It enables you to represent the data within the Kendo UI components in a hierarchical order.

Currently, the Kendo UI TreeView and PanelBar support the hierarchical Data Source. However, you can share the root level of the hierarchy with any DataSource-enabled component because the HierarchicalDataSource inherits from the DataSource.

The following example demonstrates how to bind a TreeView to the HierarchicalDataSource, display a two-level hierarchy of items, and bind a Grid to the same HierarchicalDataSource which displays the root level of items.

<div id="vueapp" class="vue-app">
        <kendo-hierarchicaldatasource ref="remoteDatasource"
                                      :type="'odata'"
                                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories'"
                                      :schema-model="dsModel">
        </kendo-hierarchicaldatasource>
        <kendo-treeview :data-text-field="['CategoryName', 'ProductName']"
                        :data-source-ref="'remoteDatasource'"
                        style="height: 300px">
        </kendo-treeview>
        <kendo-grid :data-source-ref="'remoteDatasource'" :height="300">
            <kendo-grid-column field="CategoryName" title="Name"></kendo-grid-column>
            <kendo-grid-column field="Description"></kendo-grid-column>
        </kendo-grid>
</div>
Vue.use(DataSourceInstaller);
Vue.use(GridInstaller);
Vue.use(TreeViewInstaller);

new Vue({
    el: '#vueapp',
    data: {
        dsModel: {
            id: "CategoryID",
            hasChildren: "Products",
            children: {
                type: "odata",
                transport: {
                    read: {
                        url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                    }
                },
                schema: {
                    model: {
                        id: "ProductID",
                        hasChildren: false
                    }
                }
            }
        }
    }
})
In this article