Deselect Treeview item

[Kevin]

I am using the Telerik MVC treeview control as a menu navigation system.  It works quite well except that you can't select or click the same treeview item twice in a row.  Once an item is selected, you must select something else, before going back to that original item.  If you click the same item twice, the treeview onSelectEvent will not fire the second time.

You might say that this is by design and why would you want to select the same item twice in a row.  If you are using the treeview control as a navigation system together with a tabstrip, and the treeview control creates new tabs that you can close, you will see the need arise to click the same treeview item twice.

Any suggestions on how to deal with this?

Steve

[Kevin]

I fixed this problem by commenting out the "addClass" method in the nodeSelect function of telerik.treeview.js:

nodeSelect: function (g, f) {
    if (!this.shouldNavigate(f)) {
        g.preventDefault()
    }
    var d = c(f);
    if (!d.hasClass(".t-state-selected") && !b.trigger(this.element, "select", {
        item: d.closest(".t-item")[0]
    })) {
        c(".t-in", this.element).removeClass("t-state-hover t-state-selected");
        //d.addClass("t-state-selected")
    }
},

This is obviously not the most elegant way to do this.  If anyone has some recommendations, let me know.

Steve

[John DeVight]

Hey Steve,

I took a look at the source code for telerik.treeview.min.js and see that when the treeview object is instantiated, a delegate is created to call the nodeSelect function when a node is clicked.  I came up with a solution where I add an "onload" client event to the treeview and in the "onload" event handler, I add another delegate to remove the t-state-selected class when the node is clicked.

Here is the treeview:

<%
    Html.Telerik().TreeView()
        .Name("MyTreeView")
        .DataBinding(dataBinding => dataBinding
            .Ajax().Select("GetTreeItems", "Home")
        )
        .ClientEvents(events => events.OnLoad("MyTreeView_OnLoad"))
        .Render();
%>

And here is the "MyTreeView_OnLoad" javascript function:

<script type="text/javascript">

    MyTreeView_OnLoad = function(e) {

        var d = ".t-in:not(.t-state-selected,.t-state-disabled)";

        var treeview = $('#MyTreeView').data('tTreeView');

        $(treeview.element).delegate(d, "click", $.telerik.delegate(treeview,
               function(g, f) { var d = $(f); d.removeClass("t-state-selected"); }));

    }

</script>

Let me know if this works for you...

Regards,

John DeVight