General
You can embed any content inside RadPanelBar's ContentTemplate and HeaderTemplate:
- 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>
All server controls located in the templates are directly accessible by their IDs
on Page-level. Instead of using the common syntax
RadPanelBar1.Items[0].Header.FindControl("RadMenu1") //inside a HeaderTemplate
RadPanelBar1.Items[0].FindControl("RadMultiPage1") //inside a ContentTemplate
you can use
RadMenu1 or
RadMultiPage1 to reference the control located
inside the respective template of the first root Item of a PanelBar.
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.
If you want to stop the propagation of the click event you can wrap the target content
with a
<div> element and handle its click event in this way:
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.