Loading HTML into RadPanelItem

4 posts, 0 answers
  1. Andrew
    Andrew avatar
    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?

     

     

     

  2. Shinu
    Shinu avatar
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    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

  5. Andrew
    Andrew avatar
    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

Back to Top