OnClientNodeClicked not firing for entire node

4 posts, 0 answers
  1. Brad H
    Brad H avatar
    31 posts
    Member since:
    Aug 2009

    Posted 17 Dec 2009 Link to this post

    I have the OnClientNodeClicked subscribed to a function which calls the toggle method on the node.  However, the node is only toggling when the user clicks the inner text of the node (rtIn).  How can I make the node toggle when any part of the node panel is clicked?  Similar to the way the menu in the Telerik Demo page works on the left hand side.  Any help would be appreciated.  I've included some code to further illustrate.  Thank you.

    <telerik:RadTreeView runat="server" ID="trtvLeftNav" LoadingStatusPosition="BeforeNodeText" Skin="TreeLeft" 
        AllowNodeEditing="False" EnableDragAndDrop="false" EnableEmbeddedSkins="false" 
        EnableEmbeddedBaseStylesheet="false" OnClientDoubleClick="OnClientDoubleClickHandler" 
        OnClientNodeExpanding="toggleHandler" OnClientNodeCollapsing="toggleHandler" 
        OnClientNodeClicked="OnClientNodeClickedHandler"
        <Nodes> 
            <telerik:RadTreeNode runat="server" Text="Our Products" ExpandMode="ClientSide"
            </telerik:RadTreeNode> 
            <telerik:RadTreeNode runat="server" Text="Root Node" ExpandMode="ClientSide"
                <nodes> 
                    <telerik:RadTreeNode runat="server" Text="Child Node" ExpandMode="ClientSide"
                    </telerik:RadTreeNode> 
                </nodes> 
            </telerik:RadTreeNode> 
            <telerik:RadTreeNode runat="server" Text="Root Node 2" ExpandMode="ClientSide"
            </telerik:RadTreeNode> 
        </Nodes> 
    </telerik:RadTreeView> 
    <script type="text/javascript"
    var cancel = false
     
    function toggleHandler(sender, eventArgs) 
        eventArgs.set_cancel(cancel); 
        cancel = false
     
    function OnClientDoubleClickHandler(sender, eventArgs) 
        cancel = true
     
    function OnClientNodeClickedHandler(sender, eventArgs)  
    {  var node = eventArgs.get_node();  
       node.toggle();      
    }  
    </script> 

  2. Yana
    Admin
    Yana avatar
    5013 posts

    Posted 18 Dec 2009 Link to this post

    Hi Brad,

    Could you please add the following css styles to your page and let us know how it goes:

    <style type="text/css">
         
        div.RadTreeView .rtLI,
        div.RadTreeView .rtIn,
        div.RadTreeView .rtTop,
        div.RadTreeView .rtMid,
        div.RadTreeView .rtBot {
            width: 100% !important;
        }
         
        div.RadTreeView .rtIn {
            display: inline-block !important;
        }
         
    </style>


    Kind regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Brad H
    Brad H avatar
    31 posts
    Member since:
    Aug 2009

    Posted 18 Dec 2009 Link to this post

    This did widen the rtIn in my node so that when it is clicked, the node expands......however, if I click above or below the rtIn within the node, the node does not expand.  I want the user to be able to expand the node by clicking anywhere in the node.  Just like how the double-click expand feature works by default.....but for a single click.  Thank you for your help.
  4. Brad H
    Brad H avatar
    31 posts
    Member since:
    Aug 2009

    Posted 18 Dec 2009 Link to this post

    I figured out my problem.  I did all of my padding on the rtMid so the top and bottom portions of the rtIn element weren't big enough.  So, I just moved my paddings to the rtIn elements instead.  Also, within the rtMid or rtBot div.....there are 3 spans, rtSp, rtPlus (or minus) and rtIn.  When the rtPlus or rtIn is clicked, the node will expand. (but not the rtSp)  So the trick is to get the rtPlus and rtIn to fill your entire node using whatever padding you need.  The answer Yana gave would work provided you don't have other paddings and margins on your skin affecting the previously indicated objective.  Hope this helps someone.
Back to Top