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"
        <kendo-treeview :data-text-field="['CategoryName', 'ProductName']"
                        style="height: 300px">
        <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>

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