Combine Local Data with Remote Loading in the TreeView
Environment
| Product | Progress® Kendo UI® TreeView for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I partially preload items in the Kendo UI for jQuery TreeView?
Solution
The following example demonstrates how to achieve this behavior and request data from a remote service that has not yet been loaded.
<div id="tree"></div>
<script>
var localData = [
{ id: 1, text: "Node 1", hasChildren: true, items: [
{ id: 101, text: "Node 1.1", hasChildren: true, items: [
{ id: 10101, text: "Node 1.1.1" }
] }
] },
{ id: 2, hasChildren: true, text: "Node 2" },
{ id: 3, hasChildren: true, text: "Node 3" }
];
function get(data, id) {
if (!id) {
return data;
} else {
for (var i = 0; i < data.length; i++) {
if (data[i].id == id) {
return data[i].items;
} else if (data[i].items) {
var result = get(data[i].items, id);
if (result) return result;
}
}
}
}
$("#tree").kendoTreeView({
dataSource: {
transport: {
read: function (options) {
var id = options.data.id;
var data = get(localData, id);
if (data) {
// The item is available in the local data.
options.success(data);
} else {
// Here you can use $.ajax request and call options.success in a success handler.
// For this example, mock the call to the server with static data.
setTimeout(function() {
options.success([
{ id: id + 1, text: "Remote node 1", hasChildren: false },
{ id: id + 2, text: "Remote node 2", hasChildren: true }
]);
}, 1000);
}
}
},
schema: { model: { id: "id" } }
}
});
</script>