General

• HTML markup
• ASP.NET server controls
• Third-party controls (other Telerik controls as well)

        <telerik:RadPanelItem Expanded="true">
            <HeaderTemplate>
                <telerik:RadMenu ID="RadMenu1" runat="server">
                    ...
                </telerik:RadMenu>
            </HeaderTemplate>
            <ContentTemplate>
                <telerik:RadMultiPage runat="server" ID="RadMultiPage1">
                    ...
                </telerik:RadMultiPage>
            </ContentTemplate>
        </telerik:RadPanelItem>

        RadPanelBar1.Items[0].Header.FindControl("RadMenu1") //inside a HeaderTemplate
        RadPanelBar1.Items[0].FindControl("RadMultiPage1") //inside a ContentTemplate
    

HeaderTemplate

The content in the HeaderTemplate replaces the default content of the PanelItem header. Clicking anywhere on the header will still collapse/expand the Item unless the click event bubbling is manually stopped.

        function stopPropagation(e) {
            e.cancelBubble = true;

            if (e.stopPropagation)
                e.stopPropagation();
        }
    

Note: In this demo we manually expand/collapse the Item when clicking on the RadMenu because it already does the mentioned above.

ContentTemplate

The purpose of the ContentTemplate is to provide an Item with an animated expandable/collapsible container, which holds rich HTML content instead of a standard child Item structure, e.g. The ContentTemplate is defined per Item and is available on every level. An Item can have either a ContentTemplate or child Items.