Kendo Tree - Select and Show

If on the Kendo TreeView you want to select an item and make sure it is visible then you can use the Select() and a ScrollTo() command together to achieve it.

What ever triggers the operation will need to call some Javascript to do the work. Following is an extract from my tree library that does the job:
If you are starting with an ID of the data object you want to find then you can use the treeviews get and findbyUid to get to the node on the tree.

SelectWithId: function (id) {  
    var treeview = $("#ktreeview").data("kendoTreeView");
    var dataitem = treeview.dataSource.get(id);
    if (dataitem) {
        var node = treeview.findByUid(dataitem.uid);
        if (node) {
            treeview.select(node);
            scrolldiv = treeview.element.closest(".k-scrollable");
            if (scrolldiv) {
                scrolldiv.scrollTo(node,500);
            }
            return true;
        }
    }
    return false;
},

The Select(node) selects the item on the tree.
The element closest is trying to locate the container with a scroll that the tree is in.
If the tree is in a splitter then it will find it. If you want more control then place a div around the treeview like

<div class="k-scrollable" >  

NOTE: Don't give the treeview a height. Any height style applied to it will break the scrollTo().

The scrollTo is a jQuery plug in so you need to find and add that to your project.

The example in Telerik website uses the ScrollTop but the offsetTop always returned offset from node parent which was no use.

References

http://plugins.jquery.com/scrollTo/
http://docs.telerik.com/kendo-ui/web/treeview/how-to/scroll-to-selected-item
http://www.telerik.com/forums/selectednode-scrollintoview-do-not-scroll-to-the-selected-node


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


comments powered by Disqus