Flat Data Binding
The TreeView expects hierarchical data and you have to convert all flat structures to hierarchical data before binding the component to it.
To convert flat data into hierarchical structure, use either of the following approaches which differ in the necessary time for their completion and the resulting tree:
Do not use the names of the
kendo.data.Nodefields and methods (for example,children) as fields in the TreeView data.
Initial All-Data Pre-Processing
The pre-processing of all available data and its conversion into a hierarchy prior to binding the TreeView component requires more time and memory, and the resulting tree is fully rendered.
<div id="tree"></div>
<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 data.
$("#tree").kendoTreeView({
dataSource: processTable(flatData, "id", "parent", 0),
loadOnDemand: false
});
</script>
Incremental Data Filtering
Allowing the loading of the nodes on demand is more computationally intensive as it requires the collection to be filtered each time a node gets expanded.
The following example demonstrates how to filter data incrementally.
<div id="tree"></div>
<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" }
];
// The tree for visualizing data.
$("#tree").kendoTreeView({
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>