This is a migrated thread and some comments may be shown as answers.
Expand/Collapse with single click
7 Answers 314 Views
This is a migrated thread and some comments may be shown as answers.
Zoran
Top achievements
Rank 1
Zoran asked on 02 Dec 2011, 06:49 PM
Hi, 
I did see the "expand with one click" thread but that did not solve my problem.  I need the selected node to toggle expand/collapse on the single click.  I tried using the toggle() method, via the "select" event but that only works the first time the node is selected.  The "select" event only fires once and there is no documented alternative click event on the node. This means that if a user clicks on a node the first time it expands but if he/she clicks on it again it will not collapse because the "select" event does not fire again.  Is there an event that fires every time the node is clicked on that I could hook into?  Or is there some other solution for my issue?

Thanks

7 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 05 Dec 2011, 12:42 PM
Hi Zoran,

There is no out-of-the-box functionality that handles this; however, the click event is triggered every time the user clicks -- so you can toggle the node in it.

var treeview = $("#treeview"),
    kendoTreeView = treeview.data("kendoTreeView");

treeview.on("click", ".k-in", function(e) {
    kendoTreeView.toggle($(e.target).closest(".k-item"));
});

Best wishes,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Zoran
Top achievements
Rank 1
answered on 05 Dec 2011, 01:30 PM
Thank you for the help.  Having a click and double-click event on the node seems quite important.  Do you foresee these events being added in the future releases or were they left out by design?  To me your solution seems more like a workaround than a solid solution. 
0
Mohamed
Top achievements
Rank 1
answered on 23 Jul 2014, 10:53 PM
Hello  Alex i try your solution but it dos't work  using ui for mvc 2014 Q2
0
Georgi Krustev
Telerik team
answered on 28 Jul 2014, 03:14 PM
Hello,

The code snippet given by Alex works for me. Here is a simple Dojo demo using Q2 2014 release and TreeView items are toggled on click. Let me know if I am missing something.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Andrew
Top achievements
Rank 1
answered on 15 Apr 2015, 07:09 AM

This works well with jQuery, is there a best practise method for achieving this expand/collapse with angular?

Thanks

0
Alex Gyoshev
Telerik team
answered on 17 Apr 2015, 07:16 AM

Hello Andrew,

An AngularJS-friendly approach would be to suppress selection and use it for toggling nodes instead. See this Dojo snippet. Or you can define a template with a click handler that toggles the nodes via their model. See this Dojo snippet.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Andrew
Top achievements
Rank 1
answered on 22 Apr 2015, 04:48 AM
Thanks for the help Alex, I'm not using select for anything else, so using it to toggle nodes works well. 
Asked by
Zoran
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Zoran
Top achievements
Rank 1
Mohamed
Top achievements
Rank 1
Georgi Krustev
Telerik team
Andrew
Top achievements
Rank 1
Share this question
or