Common Scenarios

Updated on Dec 10, 2025

This article provides common scenarios you might encounter when working with the Kendo UI TreeView component.

• Getting the data of the nodes
• Reloading child nodes when nodes expand
• Gathering checked nodes from the TreeView
• Projecting the state of the TreeView

Getting the Node Data

You can get the TreeView node data in the select event handler.

js

function onSelect(e) {
    // This refers to the TreeView object.
    var dataItem = this.dataItem(e.node);

    console.log("Selected node with id=" + dataItem.id);
}

$("#treeview").kendoTreeView({
    dataSource: [
        { id: 1, text: "Item 1", items: [
            { id: 3, text: "Item 3" }
        ] },
        { id: 2, text: "Item 2" }
    ],
    select: onSelect
});

Reloading Child Nodes When Nodes Expand

Since dataItem is of the Node type, you can use its loaded flag to force the reloading of nodes from the server. The Node.loaded method sets the loaded flag of the node and indicates that it needs to be refreshed.

js

function onExpand(e) {
    var dataItem = this.dataItem(e.node);

    dataItem.loaded(false);
}

$("#treeview").kendoTreeView({
    dataSource: remoteDataSource,
    expand: onExpand
});

Gathering Checked Nodes from the TreeView

The following example demonstrates how to gather the checked nodes from a Kendo UI TreeView. You can also use this approach to gather expanded nodes.

js

var treeview = $("#treeview").data("kendoTreeView");
var checkedNodes = [];

function gatherStates(nodes) {
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].checked) {
            checkedNodes.push(nodes[i].id);
        }

        if (nodes[i].hasChildren) {
           gatherStates(nodes[i].children.view());
        }
    }
}

gatherStates(treeview.dataSource.view());

Projecting the TreeView State

The HierarchicalDataSource does not support data projection. Therefore, you might need to remap the state fields by using the schema.parse configuration option.

html

<div id="tree">
<script>
  $("#tree").kendoTreeView({
    dataSource: {
      transport: {
        read: function (options) {
          setTimeout(function() {
            options.success([
              { hasChildren: false, text: "Node 1", Downloaded: false },
              { hasChildren: true, text: "Node 2", Downloaded: true, items: [
                { hasChildren: false, text: "Node 2.1", Downloaded: false },
              ] }
            ]);
          }, 1000);
        }
      },
      schema: {
        parse: function(response) {
          return $.map(response, function(x) {
            x.expanded = x.Downloaded;
            return x;
          });
        },
        model: {
          id: "id",
          hasChildren: "hasChildren",
          children: "items"
        }
      }
    }
  });

</script>

See Also

• Basic Usage of the TreeView (Demo)
• Using the API of the TreeView (Demo)
• JavaScript API Reference of the TreeView