Sort the Child Nodes of 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 sort the child nodes of the Kendo UI for jQuery TreeView?
Solution
The following example demonstrates how to programmatically change the order of all TreeView nodes.
<div>
<div style="float:left;">
<button id="expand">Expand trees</button>
<div id="treeview-desc"></div>
</div>
<div style="float:left;">
<button id="sort">Change sort order</button>
<div id="treeview-asc"></div>
</div>
</div>
<script>
function setSort(items){
for(var i=0; i < items.length; i++){
if(items[i].hasChildren){
items[i].children.sort({field: "FullName", dir: "desc"});
setSort(items[i].children.view());
}
}
}
var serviceRoot = "//demos.telerik.com/kendo-ui/service";
asc = new kendo.data.HierarchicalDataSource({
sort: { field: "FullName", dir: "asc" },
transport: {
read: {
url: serviceRoot + "/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
}),
desc = new kendo.data.HierarchicalDataSource({
sort: { field: "FullName", dir: "desc" },
transport: {
read: {
url: serviceRoot + "/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
var treeAsc = $("#treeview-asc").kendoTreeView({
loadOnDemand:false,
dataSource: asc,
dataTextField: "FullName"
}).getKendoTreeView();
var treeDesc = $("#treeview-desc").kendoTreeView({
loadOnDemand:false,
dataSource: desc,
dataTextField: "FullName"
}).getKendoTreeView();
$("#expand").click(function() {
treeAsc.expand("li");
treeDesc.expand("li");
});
$("#sort").click(function() {
setSort(treeAsc.dataSource.view());
});
</script>