RadPanelItem: Adding controls to ItemTemplate programatically

[Martin]

I have the scenario below:

 ...... inside a RadPanelBar
                <telerik:RadPanelItem Value="SubLocations" Text="Sub Locations" Expanded="true" CssClass="subPanel">
                    <ItemTemplate>
                    </ItemTemplate>
                </telerik:RadPanelItem>

I want to fill the content of ItemTemplate with a User Control which is decided at runtime. e.g. programatically.

I have tried creating a class derived from ITemplate. e.g. MyTemplateClass. I have overriden the InstantiateIn sub and added my control

    Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn

        Dim locationsTree As SystemExplorerLocationsTree = _
                DirectCast(m_Page.LoadControl("~/IpscObject/GUI/SystemExplorer/SystemExplorerLocationsTree.ascx"), SystemExplorerLocationsTree)


        container.Controls.Add(locationsTree)

    End Sub

On the aspx's Page_Init handler. I set RadPanelBar.ItemTemplate to a new instance of MyTemplateClass

locationsPanel.ItemTemplate = new MyTemplateClass()

However, the InstantiateIn function is not called. What am I doing wrong?

Thanks,
Martin

[Paul]

Hi Martin,

Please find below a sample code snippet that shows the needed approach.

ASPX:

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server">
        <CollapseAnimation Duration="100" Type="None" />
        <Items>
            <telerik:RadPanelItem runat="server" Expanded="True" Text="Root RadPanelItem1">
                <Items>
                    <telerik:RadPanelItem runat="server" Value="templateHolder">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
        <ExpandAnimation Duration="100" Type="None" />
    </telerik:RadPanelBar>
    <asp:Button ID="Button1" runat="server" Text="Button" />
</form>

Code-behind:

protected void Page_Load(object sender, EventArgs e)
{
    RadPanelItem myItem = (RadPanelItem)RadPanelBar1.FindItemByValue("templateHolder");
    myItem.Controls.Add(LoadControl("~/WebUserControl.ascx"));
}

Regards,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Nick]

I'm also adding the raditems dynamically.   I then add a user control to each item.  

The user controls do not stay created - they are lost after every postback.  Is this normal?

[Paul]

Hi Nick,

Please find attached a sample web application that shows the needed approach. Give it a try and let us know what's different in your case.

All the best,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Alexander]

Hai,

I want to add collapsible panel in runtime with Listbox inside.  For this I am using following code.  This is not getting Expanded/Collapsed on clicking the title bar.    Is there anything wrong in my code.

 

Dim rdPanelBar As New Telerik.Web.UI.RadPanelBar
rdPanelBar.AllowCollapseAllItems = True
rdPanelBar.ExpandMode = Telerik.Web.UI.PanelBarExpandMode.MultipleExpandedItems
rdPanelBar.CollapseDelay = 300
rdPanelBar.ExpandDelay = 300
Dim rdRoot As New Telerik.Web.UI.RadPanelItem
rdRoot.Text = "Investors"
rdRoot.Expanded = True
rdRoot.PreventCollapse = False
rdRoot.Selected = True
rdPanelBar.Items.Add(rdRoot)
Dim rdChild As New Telerik.Web.UI.RadPanelItem
rdChild.Text = ""
rdChild.Expanded = False
rdChild.PreventCollapse = False
rdChild.Selected = True
rdRoot.Items.Add(rdChild)
Dim rdListBox As New Telerik.Web.UI.RadListBox
rdListBox.Height = Unit.Pixel(200)
rdListBox.Width = Unit.Pixel(400)
rdListBox.Items.Add(New Telerik.Web.UI.RadListBoxItem("Fund 1", "1"))
rdListBox.Items.Add(New Telerik.Web.UI.RadListBoxItem("Fund 2", "2"))
rdChild.Controls.Add(rdListBox)
Me.Page.Controls.Add(rdPanelBar)

 

 

When I am using followng code from design time it's working fine.

<telerik:RadPanelBar ID="AA" runat="server" Skin="Forest" AllowCollapseAllItems="true" ExpandMode="MultipleExpandedItems"
            CollapseDelay="300" ExpandDelay="300">
    <Items>
        <telerik:RadPanelItem runat="server" Text="Funds" Expanded="False" PreventCollapse="false" Selected="True">
            <Items>
                <telerik:RadPanelItem runat="server" Text="" Expanded="true" PreventCollapse="false" Selected="True">
                    <ItemTemplate>
                        <telerik:RadListBox ID="lst" runat="server">
                            <Items >
                                <telerik:RadListBoxItem Text="Item 1" />
                                <telerik:RadListBoxItem Text="Item 2" />
                                <telerik:RadListBoxItem Text="Item 3" />
                                <telerik:RadListBoxItem Text="Item 4" />
                            </Items>
                        </telerik:RadListBox>
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

Please help me to expand/collapse dynamically created PanelBar.  I cann't go with design time Markup because I don't know how many I need to show in runtime.  This comes from database.  This is very high priority for me and please get back to me ASAP.
Thank you.

[Kate]

Hello Alexander,

Please take a look at the following help article where it is fully explained how you can add ItemTemplate to the RadPanelBar using server-side programming.

All the best,
Kate
the Telerik team