Custom HierarchicalDataSource
The HierarchicalDataSource allows you to apply custom ways for data binding when the default configuration is not actionable.
Customizing Transport Binding
If you have a way of fetching data that cannot be achieved through the default transport configuration of the DataSource, you can provide the custom transport—a custom read function that fetches the data and delivers it to the data source. This configuration enables you to query different URLs conditionally or provide generated authentication tokens for each request.
<script>
var datasource = new kendo.data.HierarchicalDataSource({
transport: {
read: function(options) {
var id = options.data.EmployeeId;
// [additional processing here]
$.ajax({
url: "https://demos.telerik.com/kendo-ui/service/employees",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
data: { EmployeeId: id },
success: function(result) {
// Notify the data source that the request succeeded.
options.success(result);
},
error: function(result) {
// Notify the data source that the request failed.
options.error(result);
}
});
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
datasource.read();
</script>
Fetching Hierarchy through Single Requests
Because the HierarchicalDataSource loads data on demand, loading all available data can result in multiple requests to the server. To prevent this, make a single AJAX request to get all the data, and then provide it to the dataSource.
<script>
var datasource = new kendo.data.HierarchicalDataSource({
transport: {
read: function(options) {
// asynchonous operation for getting data (e.g. $.ajax)
// then pass data in success or error handler
options.success([
{ id: 1, Name: "Tea", items: [
{ id: 2, Name: "Earl Gray" },
{ id: 3, Name: "Oolong" }
] }
]);
}
},
schema: {
model: {
children: "items"
}
}
});
datasource.read();
var rootItems = datasource.data();
console.log(rootItems.length); // logs 1
rootItems[0].load(); // does not initiate AJAX request
console.log(rootItems[0].children.data().length); // logs 2
</script>