Loading HTML into RadPanelItem in UI for ASP.NET AJAX PanelBar

Andrew

4 posts

Member since:
Jun 2009

Posted 23 Feb 2010 Link to this post

I have the following telerik:RadPanelBar Declared in a default.aspx page

    
            <telerik:RadPanelBar runat="server" ID="radIdentifyPanel" Skin="WebBlue" Width="100%" Height="100%" ExpandMode="FullExpandedItem">  
        
            <Items> 
        
            <telerik:RadPanelItem Text="Details" Expanded="true" runat="server">  
        
            <Items> 
        
            <telerik:RadPanelItem runat="server">  
        
            <ItemTemplate>   
        
            <telerik:RadColorPicker ID="RadColorPicker1" runat="server" AutoPostBack="True" Preset="Standard">   
        
            </telerik:RadColorPicker>   
        
            <asp:Label ID="lblTest" runat="server" Text="Change me"></asp:Label>   
        
            <asp:Panel ID="IdentifyFSDetails" runat="server">   
        
            Dynmanic Details here!   
        
            </asp:Panel>   
        
            </ItemTemplate>   
        
            </telerik:RadPanelItem>   
        
            </Items> 
        
            </telerik:RadPanelItem> 
        
            ....  
        
            </Items>   
        
            <ExpandAnimation Type="None" />   
        
            </telerik:RadPanelBar>

I am trying to dynamically insert some html into the asp:Panel IdentifyFSDetails but can not seem to get access to it using the following javascript clientside.

    
            var panelbar = $find("radIdentifyPanel");   
        
            var item = panelbar.findItemByText('Details');   
        
            var test1 = item.findControl("IdentifyFSDetails");   
        
            var test2 = item.findControl("lblTest");

both test1 and test2 return null while if I try getting the reference to the color picker like the example it does get a reference to it.
All I am trying to do is insert the dynamic html into the panel.
What am I doing wrong?

Shinu

17764 posts

Member since:
Mar 2007

Posted 24 Feb 2010 Link to this post

Hello Andrew,

You can try the following approach in order to access the ASP panel placed in the ItemTemplate, from client side.

JavaScript:

    
                function accessTemplate() { 
        
                    var panelBar = $find('<%= RadPanelBar1.ClientID %>'); 
        
                    var item = panelBar.findItemByText('Root RadPanelItem3'); 
        
                    var panel = document.getElementById('<%= RadPanelBar1.FindItemByText("radIdentifyPanel").FindControl("Panel1").ClientID%>'); 
        
                    panel.innerHTML = "Success"; 
        
                }

Regards,
Shinu.

Andrew

4 posts

Member since:
Jun 2009

Posted 24 Feb 2010 Link to this post

I tried putting your provided example as follows inside a script block

    
            <telerik:RadScriptBlock ID="sb" runat="server">  
        
            function GetFSDetailsPanel() {  
        
              var panelBar = $find('<%= radIdentifyPanel.ClientID %>');  
        
              var item = panelBar.findItemByText('Facility Site Details');  
        
              var panel = document.getElementById('<%= radIdentifyPanel.FindItemByText("Details").FindControl("IdentifyFSDetails").ClientID%>');    
        
              return panel;    
        
            }     
        
            </telerik:RadScriptBlock>

This throws a NullReferenceException when attempting to reference the Details Panel in the FindControl method
Also, reading your code block I am a little uncertain why your getting reference the the panelBar and the item and then just calling document.getElemenentById.
This does need to be in a telerik:radscriptblock to evaluate at runtime correct?

And this solution still does not answer the question why I can reference a telerik control inside a template but not a asp control.
Could you provide an example where your javascript is accessing a regualr asp item such as a div and changing the innerHTML property through Javascript clientside.

Thanks for the Help,

Andrew

Andrew

4 posts

Member since:
Jun 2009

Posted 24 Feb 2010 Link to this post

I figured it out after digging around in the other forum posts a little deeper.

    
            var panelbar = $find("radIdentifyPanel");  
        
            var item = panelbar.findItemByText('Details');  
        
            var panel = $telerik.findElement(item.get_element(), "IdentifyFSDetails");  
        
            panel.innerHTML = "Success!";

this works and returns a valid reference to the DOM panel control

reference post:
http://www.telerik.com/community/forums/aspnet-ajax/panelbar/getting-refrences-to-radbar-s-controls-using-javascript.aspx