Unfortunately, the KendoUI TreeView does not implement the SingleExpandPath that the RadTreeView does. If that were the case, a simple setting to “true” would automatically expand the tree branch to display the current leaf and collapse all other branches.
However, without this, we’re left to override the “expand” method and take care of collapsing other branches ourselves. The following code can be used as is on Sitefinity Widget Templates to display a navigation menu that autoexpands to show the currently loaded page in the tree view. Templates in Sitefinity are in the Dashboard > Design > Templates, Widget Templates administration section.
Notice that in initialising the treeview, we set the animation to false, and override the expand method to include a recursive collapse for all siblings of the current node’s parents.
Without doing so, clicking on the plus (+) sign next to a branch, expands the branch without collapsing other branches that have already been expanded. Notice though that since we have now overriden the expand method, if we expand a branch in code, everything else will collapse, as expected. That’s what the final two commands do, which could have been one, but, they’re two.
We grab the pathname which is the relative URL to the current page, and we match that against the href argument of all anchors on the page. For that collection (which, will always hopefully only have one member), we get the collection of parents that are of the two classes used by the treeview and we perform an expand and collapse as required.
<%– link to Kendo documentation http://demos.kendoui.com/web/treeview/index.html –%>
<script type=”text/javascript”>
(function ($) {
var kendoTreeView = $(‘.sfNavTreeview’).not(‘div.k-treeview .sfNavTreeview’).kendoTreeView({
animation: false,
expand: function(e) {
$(e.node).parents(“.k-item”, “.k-treeview”).andSelf().each(function() {
e.sender.collapse($(this).siblings());
});
}
}).data(‘kendoTreeView’);
var aHref = window.location.pathname;
kendoTreeView.expand(kendoTreeView.element.find($(‘a[href=”‘+aHref+'”]’).parents(“.k-item”, “.k-treeview”)));
//kendoTreeView.expand();
})(jQuery);
</script>
