Skip to content

Commit a290723

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent fe2fb78 commit a290723

File tree

5 files changed

+660
-36
lines changed

5 files changed

+660
-36
lines changed

‎docs/controls/dropdowntree/binding/load-on-demand.md‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
---
2+
title: Load on Demand
3+
page_title: jQuery DropDownTree Documentation - Load on Demand
4+
description: "Get started with the jQuery DropDownTree by Kendo UI and learn how to enable load on demand for improved performance with large hierarchical datasets."
5+
slug: loadondemand_dropdowntree_widget
6+
position: 3
7+
---
8+
9+
# Load on Demand
10+
11+
The Kendo UI for jQuery DropDownTree supports loading child nodes on demand by setting the [`loadOnDemand`](/api/javascript/ui/dropdowntree/configuration/loadondemand) property to `true`.
12+
13+
This feature demonstrates how the DropDownTree can efficiently handle large hierarchical datasets by fetching child data lazily when parent groups get expanded. This approach improves initial load performance by only loading the data that is actually needed.
14+
15+
When load on demand is enabled, the component will automatically request child data from the server when a parent node is expanded for the first time. This is particularly useful for scenarios with deep hierarchical structures or when dealing with large amounts of data.
16+
17+
## Basic Configuration
18+
19+
To enable load on demand, set the [`loadOnDemand`](/api/javascript/ui/dropdowntree/configuration/loadondemand) property to `true` in the DropDownTree configuration. The following example demonstrates a basic setup with remote data binding and load on demand functionality.
20+
21+
```dojo
22+
<input id="dropdowntree" />
23+
24+
<script>
25+
$("#dropdowntree").kendoDropDownTree({
26+
loadOnDemand: true,
27+
dataSource: {
28+
transport: {
29+
read: {
30+
url: "https://demos.telerik.com/service/v2/core/Employees",
31+
dataType: "json"
32+
}
33+
},
34+
schema: {
35+
model: {
36+
id: "EmployeeId",
37+
parentId: "ReportsTo",
38+
fields: {
39+
EmployeeId: { type: "number", nullable: false },
40+
ReportsTo: { field: "ReportsTo", nullable: true },
41+
FullName: { field: "FullName" }
42+
},
43+
hasChildren: "HasChildren"
44+
}
45+
}
46+
},
47+
dataTextField: "FullName"
48+
});
49+
</script>
50+
```
51+
52+
## Value Mapper Configuration
53+
54+
When using load on demand with pre-selected values, you may need to implement a [`valueMapper`](/api/javascript/ui/dropdowntree/configuration/loadondemand.valuemapper) function to resolve the selected values to their corresponding data items. The [`valueMapper`](/api/javascript/ui/dropdowntree/configuration/loadondemand.valuemapper) is particularly useful when you have initial values that need to be displayed but the corresponding data items are not yet loaded due to the lazy loading nature of load on demand.
55+
56+
The following example demonstrates how to configure a [`valueMapper`](/api/javascript/ui/dropdowntree/configuration/loadondemand.valuemapper) function that fetches the data items for the selected values from the server.
57+
58+
```dojo
59+
<input id="dropdowntree" />
60+
<script>
61+
var serviceRoot = "https://demos.telerik.com/service/v2/core";
62+
63+
$("#dropdowntree").kendoDropDownTree({
64+
loadOnDemand: {
65+
valueMapper: function (options) {
66+
$.ajax({
67+
url: `${serviceRoot}/Employees/ValueMapper`,
68+
type: "GET",
69+
data: convertValues(options.value),
70+
success: function (data) {
71+
options.success(data);
72+
}
73+
});
74+
}
75+
},
76+
dataSource: {
77+
transport: {
78+
read: {
79+
url: `${serviceRoot}/Employees`,
80+
dataType: "json"
81+
}
82+
},
83+
schema: {
84+
model: {
85+
id: "EmployeeId",
86+
parentId: "ReportsTo",
87+
fields: {
88+
EmployeeId: { type: "number", nullable: false },
89+
ReportsTo: { field: "ReportsTo", nullable: true },
90+
FullName: { field: "FullName" }
91+
},
92+
hasChildren: "HasChildren"
93+
}
94+
}
95+
},
96+
dataTextField: "FullName",
97+
dataValueField: "EmployeeId",
98+
value: [4, 2] // Pre-selected values that will be resolved via valueMapper
99+
});
100+
101+
function convertValues(value) {
102+
var data = {};
103+
value = $.isArray(value) ? value : [value];
104+
105+
for (var idx = 0; idx < value.length; idx++) {
106+
data["values[" + idx + "]"] = value[idx];
107+
}
108+
109+
return data;
110+
}
111+
</script>
112+
```
113+
114+
The [`valueMapper`](/api/javascript/ui/dropdowntree/configuration/loadondemand.valuemapper) function receives an `options` object with the following properties:
115+
116+
* `value`: An array of the selected values that need to be resolved to data items.
117+
* `success`: A callback function that should be called with the resolved data items.
118+
119+
The server endpoint should return the data items that correspond to the provided values, allowing the DropDownTree to display the correct text for the selected values even before the full hierarchical data is loaded.
120+
121+
## Performance Benefits
122+
123+
Load on demand provides several performance advantages:
124+
125+
* **Faster Initial Load**: Only root-level nodes are loaded initially, reducing the time required for the component to render.
126+
* **Reduced Memory Usage**: Child nodes are loaded only when needed, minimizing memory consumption.
127+
* **Improved User Experience**: Users can start interacting with the component immediately while additional data loads in the background.
128+
* **Server Efficiency**: Reduces the initial server response size and distributes data loading across multiple requests.
129+
130+
## See Also
131+
132+
* [Load on Demand DropDownTree (Demo)](https://demos.telerik.com/kendo-ui/dropdowntree/load-on-demand)
133+
* [Remote Data Binding by the DropDownTree (Demo)](https://demos.telerik.com/kendo-ui/dropdowntree/remote-data-binding)
134+
* [JavaScript API Reference of the DropDownTree](/api/javascript/ui/dropdowntree)

0 commit comments

Comments
 (0)