Expand a node when clicking the text

[Andrew Denham]

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

[Veronica]

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

[Andrew Denham]

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

[Veronica]

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

[Andrew Denham]

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

 

 

 

 

 

 

[Veronica]

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

[Andrew Denham]

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);
                    }
                }