Kendo UI TreeView search with Virtualization - asp.net-mvc

Question

I am using Kendo UI TreeView with virtualization feature (ASP.net MVC); it helps me to load the top level initially & loads further levels on-demand.
Now there is a requirement to include “search” functionality to search nodes in the TreeView.
Unfortunately I don’t have all the nodes pre-loaded in my TreeView to perform search; can you please suggest if there are any alternatives to perform search dynamically inside TreeView.
Thank you
-nm

Answer 1

I ran into a similar problem and managed to fix it by implementing two Controller methods
Controller.LoadNodes(int? parentId)
Controller.SearchNodes(string searchTerm)
LoadNodes would return a flat list of direct children. Whereas SearchNodes would return a nested list of matched search terms and their parents.
My example used a SQL Server backup and followed the Hierachyid Data Type tutorial.
Once you've got that setup in the search button click event swap out the datasource for your treeview. Notice you have to set the datasource using the setDataSource method based on a post in the Telerik forums titled "Error when attempting to change datasource on treeview".
function ExpandNodes(nodes) {
return $.map(nodes, function (x) {
x.expanded = x.children.length > 0;
if (x.expanded)
ExpandNodes(x.children);
return x;
});
};
$("#search-btn").click(function(){
var searchText = $("#SearchText").val();
var treeview = $("#TreeView").data("kendoTreeView");
if(searchText.trim() != "")
{
url = "Controller/SearchNodes?searchText=" + searchText;
data.setDataSource(new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: url,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: {
parse: function (response) {
return ExpandNode(response);
},
model: {
id: "node_id",
children: "children",
expanded: true
}
}
}));
}
else
{
url = "Controller/LoadNodes";
data.setDataSource(new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: url,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
model: {
id: "node_id",
}
}
}));
}
data.dataSource.read();
});