Only select tree nodes with no parents

4 posts, 1 answers
  1. Karl Mikesell
    Karl Mikesell avatar
    55 posts
    Member since:
    May 2010

    Posted 14 May 2012 Link to this post

    Only certain TreeView nodes can be selected, and using enabled: false; does not allow the expand to function.

    How is it possible to only select tree nodes with no parents?  This means their parent node cannot be selected.  Can the select event be canceled?
  2.
  3. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 15 May 2012 Link to this post

    Hello Karl,

    The select event can be canceled. Just call e.preventDefault() in the event handler.

    If you want to remove the hover styles for the nodes that cannot be selected, you can do so by detaching the mouseenter/mouseleave event handlers of the nodes:

    $("#treeview")
        .filter(function() {
            /* nodes that can not be clicked */
        })
        .off("mouseenter mouseleave");

    Regards,
    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!
  5. Karl Mikesell
    Karl Mikesell avatar
    55 posts
    Member since:
    May 2010

    Posted 15 May 2012 Link to this post

    The .filter function will need to be a wrapped set of nodes that cannot be clicked?

    Is there a way to get all nodes in the treeview and remove nodes that can be clicked from the wrapped set? 

  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 16 May 2012 Link to this post

    Hello Karl,

    Just tried the sample more thoroughly, and it seems I misguided you. The call to off() will disable all hover effects, and the filter won't do anything. In order to make it work, the handlers need to be re-attached to the clickable nodes:

    $("#treeview").data("kendoTreeView").wrapper
        .off("mouseenter mouseleave")
        .find(".k-item > div:only-child .k-in")
            .on({
                mouseenter: function() { $(this).addClass("k-state-hover"); },
                mouseleave: function() { $(this).removeClass("k-state-hover"); }
           });

    Regards,
    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!
Back to Top