Find a radio button control in Node Template of Telerik RadTreeNode of RadTreeView

Question

I am trying to find a radio button control in the node template of rad tree view. In JavaScript, i can get all nodes but not this radio control.

My requirement is a tree view with check boxes and 2 radio buttons for item options.

I am using following code in asp.net

<div>
                <telerik:RadTreeView ID="Tree" runat="server" ShowLineImages="True" CheckBoxes="true"> 
                <Nodes> 
                   <telerik:RadTreeNode runat="server" Text="Product" Expanded="false">
                    <Nodes>
                        <telerik:RadTreeNode Text="Item 1">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Type" Checkable="false">  
                                <NodeTemplate> 
                                    <div> 
                                        <asp:RadioButton runat="server" ID="RB1" Text="Option 1" GroupName="StandardTags" /><br /> 
                                        <asp:RadioButton runat="server" ID="RB2" Text="Option 2" GroupName="StandardTags" />
                                    </div> 
                                </NodeTemplate> 
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>

                        <telerik:RadTreeNode Text="Item 2">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Type" Checkable="false">  
                                <NodeTemplate> 
                                <div> 
                                    <asp:RadioButton runat="server" ID="RB3" Text="Option 1" GroupName="StandardTags" /><br /> 
                                    <asp:RadioButton runat="server" ID="RB4" Text="Option 2" GroupName="StandardTags" />
                                </div> 
                                </NodeTemplate> 
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                    </telerik:RadTreeNode>
                </Nodes> 
                </telerik:RadTreeView>        
                <telerik:RadButton runat="server" OnClientClicked="findControl" Text="Find Control" AutoPostBack="false"></telerik:RadButton>

           </div>

I am trying to get nodes in JavaScript like this

function findControl() {
              var tree = $find('<%=Tree.ClientID%>');
              var element = tree.findNodeByText("Item 1").get_text();

              alert('You have selected ' + element);
          }

But I cannot find any option to select radio buttons in 'Item 1'.

I need to get node and selected value of radio button.

If there is any other to achieve this functionality, please suggest.

Many Thanks

Answer 1

You have to follow the same control heirarchy when trying to find a control in javascript.

var tree = $find("<%= Tree.ClientID %>");

var cDiv = tree.findNodeByText("Item 1").get_nodes().getNode(0).get_contentElement();

var radioBtn = $(cDiv).find("input:radio");

radioBtn.each(function (index, element) {

        alert(element.value + ' = ' + element.checked);

});

Notice that after findNodeByText("Item 1") , i am getting all child nodes, and then take the first node (The node containing the text "Type") and then the html using get_contentElement();

After that , you can use regular jquery to find the radio buttons and manipulate them as you wish.

Telerik client side documentation

RadTreeNode RadTreeNodeCollection