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

Loading HTML into RadPanelItem

3 Answers 215 Views

PanelBar

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

Andrew asked on 24 Feb 2010, 01:10 AM

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?

3 Answers, 1 is accepted

answered on 24 Feb 2010, 11:11 AM

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.

answered on 24 Feb 2010, 04:49 PM

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

answered on 24 Feb 2010, 05:31 PM

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