Expand/Collapse with single click

8 posts, 1 answers
  1. Zoran
    Zoran avatar
    3 posts
    Member since:
    Dec 2011

    Posted 02 Dec 2011 Link to this post

    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
  2. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 05 Dec 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Zoran
    Zoran avatar
    3 posts
    Member since:
    Dec 2011

    Posted 05 Dec 2011 Link to this post

    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. 
  5. Mohamed
    Mohamed avatar
    1 posts
    Member since:
    Jun 2014

    Posted 23 Jul 2014 in reply to Alex Gyoshev Link to this post

    Hello  Alex i try your solution but it dos't work  using ui for mvc 2014 Q2
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 28 Jul 2014 Link to this post

    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!
     
  7. Andrew
    Andrew avatar
    4 posts
    Member since:
    Jun 2012

    Posted 15 Apr 2015 in reply to Georgi Krustev Link to this post

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

    Thanks

  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 17 Apr 2015 Link to this post

    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!
     
  9. Andrew
    Andrew avatar
    4 posts
    Member since:
    Jun 2012

    Posted 21 Apr 2015 in reply to Alex Gyoshev Link to this post

    Thanks for the help Alex, I'm not using select for anything else, so using it to toggle nodes works well. 
Back to Top
Kendo UI is VS 2017 Ready