Expand a node when clicking the text

7 posts, 0 answers
  1. Andrew Denham
    Andrew Denham avatar
    4 posts
    Member since:
    Apr 2010

    Posted 14 Sep 2010 Link to this post

    Hi,
    I have a radTreeView control set-up as:

     

     

     

     

    <telerik:RadTreeView ID="tvIndustrySectors" runat="server" CheckBoxes="true" TriStateCheckBoxes="False" Height="180px" />


    I add the nodes from the code behind and it goes down about 3 levels. What I want to acheive is when a user clicks on the text of a node it will expand and show the children.

    Can this be done easily by setting a value on either the control or on each node when added?

    Many thanks
    Ed
  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 15 Sep 2010 Link to this post

    Hi Ed Jones,

    This could be achieved easily via javascript by subscribing to the OnClientNodeClicked event.
    Please take a look at this help topic how.

    Regards,
    Veronica Milcheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Andrew Denham
    Andrew Denham avatar
    4 posts
    Member since:
    Apr 2010

    Posted 15 Sep 2010 Link to this post

    Many thanks for this, it works just as I wanted, now I have one more follow up request.

    As originally explained I have a tree which is two-three levels deep, when clicking a text lable on the level1 or level2 nodes I want the action to expand which is what it now does, however, on the end nodes (leaf?) I have checkboxes displayed, I'd like the text label on these to automatically check thebox when the text is clicked. I'm sure this is possible in a similar way to the above but need guidence as to what to set and run.

    Many thanks
    Ed
  4. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 16 Sep 2010 Link to this post

    Hello Ed Jones,

    Yes, you can use the same client-side event to achieve this. You only need to get all of the nodes of the currently selected node and check which one of them have no children (leaf nodes) and to check them. Here's the code:

    function ClientNodeClicked(sender, eventArgs) {
               var node = eventArgs.get_node();
               node.toggle();
               var allNodes = node.get_allNodes();
               if (node.get_checked()) {
                   for (var i = 0; i < allNodes.length; i++) {
                       if (allNodes[i].get_nodes().get_count() == 0) {
                           allNodes[i].set_checked(false);
                       }
                   }
               }
               else {
                   for (var i = 0; i < allNodes.length; i++) {
                       if (allNodes[i].get_nodes().get_count() == 0) {
                           allNodes[i].set_checked(true);
                       }
                   }
               }
           }
           function clientNodeChecking(sender, args) {
               args.set_cancel(true);
           }

    Hope this helps.

    Kind regards,
    Veronica Milcheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Andrew Denham
    Andrew Denham avatar
    4 posts
    Member since:
    Apr 2010

    Posted 16 Sep 2010 Link to this post

    Thanks but not quite what I needed. I don't need to check all the children, I need to tick the currently selected box AND then fire this as an AJAX post back so that it fires the same event as:

     

     

     

     

    Protected Sub tvIndustrySectors_SelectionChanged(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeEventArgs) Handles tvIndustrySectors.NodeCheck


    Using your code I can check the current item by using:

                    <script language="javascript" type="text/javascript">
                    function ClientNodeClicked(sender, eventArgs) {
                        var node = eventArgs.get_node();
                        node.toggle();
      
                        node.set_checked(true);
                        if (node.get_checked() == true) {
                            //
                        }
                    }
                </script>

     

     

     

     

     

     


    I just need to now signify which node was checked to the code behind.

    Thanks
    Ed

     

     

     

     

     

     

  6. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 20 Sep 2010 Link to this post

    Hello Ed Jones,

    Here's the code for AJAX postback:

    Javascript:
    function ClientNodeClicked(sender, eventArgs) {
                var node = eventArgs.get_node();
                node.toggle();
      
                node.set_checked(true);
                if (node.get_checked() == true) {
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    ajaxManager.ajaxRequest("checked");
                }
            }

    C#:
    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
       {
           RadAjaxManager1.Alert(e.Argument);
       }

    Now in e.Argument you have the "ticked" node and you can process with it as you like futher. Find the full code in the attached .zip file.

    Hope this helps.

    Kind regards,
    Veronica Milcheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Andrew Denham
    Andrew Denham avatar
    4 posts
    Member since:
    Apr 2010

    Posted 21 Sep 2010 Link to this post

    Thanks I've got this working by adding the radAJAXManager and using this Javascript:
    function ClientNodeClicked(sender, eventArgs) {
                        var node = eventArgs.get_node();
                        node.toggle();
                          
                        if (node.get_checked() == true)
                        {
                            node.uncheck();    
                            }
                        else
                        {
                            node.check();    
                        }
      
      
                        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>"); 
                        if (node.get_checked() == true)
                        {
                            ajaxManager.ajaxRequest(node.get_value); 
                            }
                        else
                        {
                              
                            node.set_checked(false);
                            ajaxManager.ajaxRequest(node.get_value); 
                        }
                    }
Back to Top