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

Expand/Collapse with Single Click

3 Answers 111 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.
travisshepherd
Top achievements
Rank 1
travisshepherd asked on 26 May 2010, 09:42 PM
Is there a way to expand and collapse the TreeView nodes with a single (left) mouse click?

3 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 27 May 2010, 11:42 AM
Hello Travis,

Add a handler for the TreeView load event, like this:
.ClientEvents(events => events.OnLoad("onTreeViewLoad"))

... and use the following script:
<script type="text/javascript">
    function onTreeViewLoad() {
        var treeview = $('#TreeView').data('tTreeView');

        $(treeview.element)
            .delegate('div:not(.t-state-disabled) > .t-in', 'click', $.telerik.delegate(treeview, treeview.nodeClick))
    }
</script>


Regards,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Christopher Ronak
Top achievements
Rank 1
answered on 05 Jun 2010, 06:19 PM
Hi Alex,
Can this work using ajax data binding? I've tried it and can't get it to work. Actually I'd like for my treeview to initialize as all expanded. Here's my treeview:

<%= Html.Telerik().TreeView() 
                .Name("DepartmentMainTreeView") 
                        .BindTo(Model, (item, department) => 
                        { 
                            item.Text = department.Name; 
                            item.Value = department.DepartmentId.ToString(); 
                            item.ImageUrl = "/Content/Images/network22px.png"
                            item.Expanded = true
                            item.LoadOnDemand = 0 < department.ChildDepartments.Count
                        }) 
                .ClientEvents(events => events 
                .OnSelect("onSelect") 
                .OnLoad("onTreeViewLoad")) 
                .DataBinding(x => x.Ajax().Select("_List", "DepartmentSummary")) 
        %> 

My tree comes up and is not expanded (even tho I've added the script you suggested earlier in the onTreeViewLoad() method), in addition to the fact that i've added expanded=true.
Also, the ImageUrl I've specified only appears for the very root node.

Thanks for any help!

Chris

0
Alex Gyoshev
Telerik team
answered on 07 Jun 2010, 08:53 AM
Hello Christopher,

The code does not expand the TreeView automatically, it only makes the nodes behave differently (i.e. expand them when you click on their text). In order to make the items expand, you have to call the treeview.expand method on each node, like this:

$('#TreeView1').data('tTreeView').expand('.t-item');

A word of caution, though: this will work one level at a time, so there may be several Ajax requests (namely, one per item) and you'll need to call the above line for each level of items. If you have access to the items in the controller, it's advisable (in terms of performance) to bind the TreeView initially (using the BindTo method).

Regards,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
TreeView
Asked by
travisshepherd
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Christopher Ronak
Top achievements
Rank 1
Share this question
or