Flat Data Binding

The DropDownTree expects hierarchical data and, therefore, before binding the widget to data, you have to convert all flat structures to hierarchical data.

To convert flat data into a hierarchical structure, use either of the following approaches which differ in the time that is necessary for their completion and the resulting tree.

Initial All-Data Pre-Processing

Prior to binding the DropDownTree widget, you can pre-process all available data and convert it into a hierarchy. This approach requires more time and memory, and the resulting tree is fully rendered.

<input id="dropdowntree"></input>
<script>
var flatData = [
  { id: 1, parent: 0, text: "Item 1" },
  { id: 2, parent: 0, text: "Item 2" },
  { id: 3, parent: 0, text: "Item 3" },
  { id: 4, parent: 0, text: "Item 4" },
  { id: 5, parent: 1, text: "Item 1.1" },
  { id: 6, parent: 1, text: "Item 1.2" },
  { id: 7, parent: 1, text: "Item 1.3" },
  { id: 8, parent: 3, text: "Item 3.1" },
  { id: 9, parent: 3, text: "Item 3.2" },
  { id: 10, parent: 5, text: "Item 1.1.1" },
  { id: 11, parent: 5, text: "Item 1.1.2" },
  { id: 12, parent: 5, text: "Item 1.1.3" }
];

function processTable(data, idField, foreignKey, rootLevel) {
  var hash = {};

  for (var i = 0; i < data.length; i++) {
    var item = data[i];
    var id = item[idField];
    var parentId = item[foreignKey];

    hash[id] = hash[id] || [];
    hash[parentId] = hash[parentId] || [];

    item.items = hash[id];
    hash[parentId].push(item);
  }

  return hash[rootLevel];
}

// The tree for visualizing the data.
$("#dropdowntree").kendoDropDownTree({
  dataSource: processTable(flatData, "id", "parent", 0),
  loadOnDemand: false
});
</script>

Incremental Data Filtering

You can also load the nodes on demand. However, this approach is more computationally intensive than the initial all-data pre-processing because it requires the filtering of the collection each time a node gets expanded.

<input id="dropdowntree"></input>
<script>
    var flatData = [
      { id: 1, parent: null, text: "Item 1" },
      { id: 2, parent: null, text: "Item 2" },
      { id: 3, parent: null, text: "Item 3" },
      { id: 4, parent: null, text: "Item 4" },
      { id: 5, parent: 1, text: "Item 1.1" },
      { id: 6, parent: 1, text: "Item 1.2" },
      { id: 7, parent: 1, text: "Item 1.3" },
      { id: 8, parent: 3, text: "Item 3.1" },
      { id: 9, parent: 3, text: "Item 3.2" },
      { id: 10, parent: 5, text: "Item 1.1.1" },
      { id: 11, parent: 5, text: "Item 1.1.2" },
      { id: 12, parent: 5, text: "Item 1.1.3" }
    ];

$("#dropdowntree").kendoDropDownTree({
      dataSource: {
        transport: {
          read: function(options) {
            var id = options.data.id || null;

            options.success($.grep(flatData, function(x) {
              return x.parent == id;
            }));
          }
        },
        schema: {
          model: {
            id: "id",
            hasChildren: function(x) {
              var id = x.id;

              for (var i = 0; i < flatData.length; i++) {
                if (flatData[i].parent == id) {
                  return true;
                }
              }
              return false;
            }
          }
        }
      }
    })
</script>

See Also

In this article
Not finding the help you need? Improve this article