Найдите элемент управления переключателем в шаблоне узла Telerik RadTreeNode в RadTreeView

Question

Я пытаюсь найти элемент управления переключателем в шаблоне узла представления дерева рад.В JavaScript я могу получить все узлы, но не этот радиоуправление.

Мое требование - это древовидное представление с флажками и 2 переключателями для параметров элемента.

Я использую следующий код в 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>

Я пытаюсь получить узлы в JavaScript, как это

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

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

Но я не могу найти какую-либо опцию для выбора переключателей в «Элементе 1».

Мне нужно получить узел и выбранное значение радиокнопки.

Если есть какие-либо другие возможности для достижения этой функции, пожалуйста, предложите.

Большое спасибо

Answer 1

Вы должны следовать той же иерархии элементов управления, пытаясь найти элемент управления в 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);

});

Обратите внимание, что после findNodeByText ("Item 1") , я получаю вседочерние узлы, а затем взять первый узел (узел, содержащий текст «Тип»), а затем HTML, используя get_contentElement ();

После этого вы можете использовать обычный JQuery для поискапереключатели и манипулируйте ими, как вы хотите.

Telerik клиентская документация

RadTreeNode RadTreeNodeCollection