Loading HTML into RadPanelItem

[Andrew]

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]

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]

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]

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