Kendo Tree - Expand to item on a remote loading treeview

If you have a tree that’s nodes are loaded on demand then requesting a node with a specific ID to be shown can be a pain if its not already client side. The treeview ExpandPath() can be used to automatically load in the required trees until the desired item is on the tree.

The ExpandPath() requires a list of all the ID in the hierarchy order. For example

var expandidlist = [29563, 54751, 54764, 64481, 62321];  
var treeview = $("#ktreeview").data("kendoTreeView");  
treeview.expandPath(expandidlist );  

The 2963 is the ID of the root of the tree, 54751 is a child node of that and so on all the way to the desired item ID.
Expand will trigger a load of each and expand the branch all the way to the item.

Unless you have the ID sitting around on the client something like the following was done:

Assuming you have the items ID (from a grid or something)

Do an ajax call to server to get the list of parent IDs for that item. I used a List and returned as json.
Something like

public ActionResult GetParents(int id) {  
    List<int> treeparents = _service.GetParentHierarchyForTag(id);
    return Json(treeparents, JsonRequestBehavior.AllowGet);
}

Can use the code described in "Select and Show" to find and make sure it is visible.
Can use the treeview onDataBound event to call the select and show.
Kendo Tree - Select and Show


Above referring to version
Telerik Kendo UI Professional Q1 2015
Telerik UI for ASP.NET MVC Q1 2015


comments powered by Disqus