This is a migrated thread and some comments may be shown as answers.

[Solved] Accessing Nested Controls

1 Answer 366 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Zyguy asked on 17 Jun 2008, 06:34 PM

We just upgraded to the latest version and I am really impressed with the improvements!

I've succeeded in nesting the different ASP .NET AJAX controls inside each other, for example, a RadTabstrip inside a RadPanelBar. I finally got the hang of using Findcontrol.

My problem: taking it to the next level and finding a control on a 3rd or deeper level in the hierarchy. For example, I use the following to find the RadTabStrip in one of my PanelBarItems named 'Upload':

    
            Public ReadOnly Property UploadsTS() As RadTabStrip

            Get

            Return CType(Me.RadPanelbar1.FindItemByValue("Upload").FindControl("RadTabStrip1"), RadTabStrip)

            End Get

            End Property

Now, how would I work this to find the ID of a control inside the TabStrip itself? An example in both server-side VB and clientside would be greatly appreciated.

Thanks

1 Answer, 1 is accepted

Accepted

answered on 19 Jun 2008, 07:30 PM

Hi Zyguy,

You can use the FindControl() method to find controls nested within other controls, no matter how deep in the hierarchy they exist, because this method does a recursive search on the control tree to find its children. However, due to the way the RadPanelBar is built, you must use the FindItemByValue() method to find its direct descendants.

In the specific case you are inquiring about, you would first get a reference to the RadPanelItem "Upload" using the FindItemByValue() method of the RadPanelBar. Next, in order to access any child control of the RadPanelItem control, no matter how far into the hierarchy it exists, simply call FindControl().

As far as finding the nested control on the client, the best way I know how to do that is to write custom javascript to search for the control. Each control is given a unique ClientID, but since the controls inside the RadPanelBar are not accessible until runtime, its not possible to know beforehand what that id will be.

Here is some code I wrote to demonstrate how to access and modify a RadTextBox control nested inside a RadTabStrip nested inside a RadPanelBar.

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <script type="text/javascript"> 
        
                    var setRadTextBox1Text = function(text) { 
        
                        var elements = document.getElementsByTagName('*'); 
        
                        var count = elements.length;  
        
                        var targetId = 'RadTextBox1'; 
        
                        var i;             
        
                        for (i = 0; i < count; i++) { 
        
                            var element = elements[i]; 
        
                            var pos = element.id.indexOf(targetId); 
        
                            if(pos >= 0 && element.type == 'text') { 
        
                                element.value = 'Hello, RadTextBox1!'; 
        
                                break;           
        
                            } 
        
                        }             
        
                    } 
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                    <telerik:RadPanelBar ID="RadPanelBar1" runat="server"  
        
                        Skin="Outlook" 
        
                        Height="300px" 
        
                        ExpandMode="SingleExpandedItem"> 
        
                        <Items> 
        
                            <telerik:RadPanelItem Text="Upload" Value="Upload"> 
        
                                <Items> 
        
                                    <telerik:RadPanelItem /> 
        
                                </Items> 
        
                                <ItemTemplate> 
        
                                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
        
                                        MultiPageID="RadMultiPage1"  
        
                                        Skin="Outlook"> 
        
                                        <Tabs> 
        
                                            <telerik:RadTab Text="One" /> 
        
                                            <telerik:RadTab Text="Two" /> 
        
                                            <telerik:RadTab Text="Three" /> 
        
                                        </Tabs> 
        
                                    </telerik:RadTabStrip> 
        
                                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" 
        
                                        SelectedIndex="0"> 
        
                                        <telerik:RadPageView ID="RadPageView1" runat="server"> 
        
                                            RadTextBox1:  
        
                                            <telerik:RadTextBox ID="RadTextBox1" runat="server"> 
        
                                            </telerik:RadTextBox> 
        
                                        </telerik:RadPageView> 
        
                                        <telerik:RadPageView ID="RadPageView2" runat="server"> 
        
                                            RadTextBox2: 
        
                                            <telerik:RadTextBox ID="RadTextBox2" runat="server"> 
        
                                            </telerik:RadTextBox> 
        
                                        </telerik:RadPageView> 
        
                                        <telerik:RadPageView ID="RadPageView3" runat="server"> 
        
                                            RadTextBox3: 
        
                                            <telerik:RadTextBox ID="RadTextBox3" runat="server"> 
        
                                            </telerik:RadTextBox> 
        
                                        </telerik:RadPageView> 
        
                                    </telerik:RadMultiPage> 
        
                                </ItemTemplate> 
        
                            </telerik:RadPanelItem> 
        
                            <telerik:RadPanelItem Text="Do Something Else" Value="Something Else"> 
        
                                <Items> 
        
                                    <telerik:RadPanelItem Text="Something" /> 
        
                                    <telerik:RadPanelItem Text="Something Else" /> 
        
                                </Items> 
        
                            </telerik:RadPanelItem>                 
        
                        </Items> 
        
                    </telerik:RadPanelBar> 
        
                    <div style="width:500px;"> 
        
                        Click the button below in order to change the text in the RadTextBox  
        
                        control in tab 'One' to "Hello, RadTextBox1!"           
        
                    </div> 
        
                    <asp:Button ID="Button1" runat="server" 
        
                        Text="Submit to Client" 
        
                        OnClientClick="setRadTextBox1Text('Hello, RadTextBox1!'); return false;" /> 
        
                    <div style="width:500px;"> 
        
                        Click the button below in order to change the text in the RadTextBox  
        
                        control in tab 'Two' to "Hello, RadTextBox2!"           
        
                    </div> 
        
                    <asp:Button ID="Button2" runat="server" 
        
                        Text="Submit to Server" 
        
                        OnClick="Button1_Click" />    
        
                </form> 
        
            </body> 
        
            </html>

    
            Partial Class _Default 
        
                Inherits System.Web.UI.Page 
        
                Public ReadOnly Property UploadRadPanelItem() As Telerik.Web.UI.RadPanelItem 
        
                    Get 
        
                        Dim radPanelItem As Telerik.Web.UI.RadPanelItem = CType(Me.RadPanelBar1.FindItemByValue("Upload"), Telerik.Web.UI.RadPanelItem) 
        
                        Return radPanelItem 
        
                    End Get 
        
                End Property 
        
                Public ReadOnly Property UploadTabStrip() As Telerik.Web.UI.RadTabStrip 
        
                    Get 
        
                        Dim radPanelItem As Telerik.Web.UI.RadPanelItem = Me.UploadRadPanelItem 
        
                        Dim radTabStrip As Telerik.Web.UI.RadTabStrip = CType(radPanelItem.FindControl("RadTabStrip1"), Telerik.Web.UI.RadTabStrip) 
        
                        Return radTabStrip 
        
                    End Get 
        
                End Property 
        
                Public ReadOnly Property UploadTabStripTextBox2() As Telerik.Web.UI.RadTextBox 
        
                    Get 
        
                        Dim radPanelItem As Telerik.Web.UI.RadPanelItem = Me.UploadRadPanelItem 
        
                        Dim radTextBox As Telerik.Web.UI.RadTextBox = CType(radPanelItem.FindControl("RadTextBox2"), Telerik.Web.UI.RadTextBox) 
        
                        Return radTextBox 
        
                    End Get 
        
                End Property 
        
                Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click 
        
                    Dim radTextBox2 As Telerik.Web.UI.RadTextBox = Me.UploadTabStripTextBox2 
        
                    radTextBox2.Text = "Hello, RadTextBox2!" 
        
                End Sub 
        
            End Class

Hopefully this answers your question. Please let me know if it does not.

Sincerely,
Kevin Babcock