Expand/Collapse with single click

[Zoran]

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

[Alex Gyoshev]

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

[Zoran]

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. 

[Mohamed]

Hello  Alex i try your solution but it dos't work  using ui for mvc 2014 Q2

[Georgi Krustev]

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

 

 

[Andrew]

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

Thanks

[Alex Gyoshev]

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

 

 

[Andrew]

Thanks for the help Alex, I'm not using select for anything else, so using it to toggle nodes works well.