This is a migrated thread and some comments may be shown as answers.

Deselect Treeview item

2 Answers 60 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Kevin
Top achievements
Rank 1
Kevin asked on 09 Jul 2011, 12:37 AM
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

2 Answers, 1 is accepted

Sort by
0
Kevin
Top achievements
Rank 1
answered on 09 Jul 2011, 02:58 AM
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
0
Accepted
John DeVight
Top achievements
Rank 1
answered on 09 Jul 2011, 05:27 AM
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
Tags
TreeView
Asked by
Kevin
Top achievements
Rank 1
Answers by
Kevin
Top achievements
Rank 1
John DeVight
Top achievements
Rank 1
Share this question
or