How To Get the DataItem of the Selected Node in DropDownTree

Environment

Product

Progress® Kendo UI® DropDownTree for jQuery

Description

How can I retrieve the dataItem of the selected node in Kendo UI for jQuery DropDownTree?

Solution

1. Handle the select event of the DropDownTree.
2. In the event handler you can access the embedded TreeView.
3. Then, you can use the TreeView dataItem method.

    <input id="dropdowntree"/>
    <script>
      var dataSource = new kendo.data.HierarchicalDataSource({
        transport: {
          read: {
            url: "https://demos.telerik.com/kendo-ui/service/Employees",
            dataType: "jsonp"
          }
        },
        schema: {
          model: {
            id: "EmployeeId",
            hasChildren: "HasEmployees"
          }
        }
      });

      $("#dropdowntree").kendoDropDownTree({
        dataSource: dataSource,
        dataTextField: "FullName",
        dataValueField: "EmployeeId",
        select: function(e) {
          var treeview = e.sender.treeview;
          // the result can be observed in the browser`s console (F12)
          console.log(treeview.dataItem(e.node));
        }
      });
    </script>

See Also

• DropDownTree API Reference