PanelBar - Templates

    • Understanding Exposure
      Understanding Exposure:
      How to Shoot Great Photographs
    • The Ultimage Guide
      Get the Most from Your
      Digital Camera: The Ultimate Guide
    • Digital SLR Cameras
      Digital SLR Cameras:
      Photography for Dummies
    • Cannon PowerShot SD1000
      Cannon PowerShot SD1000
    • Cannon PowerShot A570IS
      Cannon PowerShot A570IS
    • VTech Kidizoom
      VTech Kidizoom
    • Airform Digital Camera Case
      Airform Digital Camera Case
    • Case Logic Large
      Case Logic Large
    • Lewis N. Clark Waterproof Case
      Lewis N. Clark Waterproof Case
  • Customer testmonials
    Testimonials
  • How to find us
    How to find us
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link type="text/css" rel="stylesheet" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        Sys.Application.add_load(function myfunction() {
            demo.oWnd = $find("<%= RadWindow1.ClientID %>");
         });
         //]]>
    </script>
    <div class="demo-container size-wide no-bg">
        <telerik:RadPanelBar RenderMode="Lightweight" runat="server" ID="RadPanelBar1" Width="750" Height="250"
            Skin="Telerik" ExpandMode="FullExpandedItem" OnClientLoad="onLoad">
            <Items>
                <telerik:RadPanelItem Expanded="true" CssClass="top-offers">
                    <HeaderTemplate>
                        <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" OnClientItemClicked="onItemClicked"
                            Skin="Telerik">
                            <Items>
                                <telerik:RadMenuItem Text="Books" Selected="true" />
                                <telerik:RadMenuItem Text="Cameras" />
                                <telerik:RadMenuItem Text="Apparel" />
                            </Items>
                        </telerik:RadMenu>
                        <div class="special-offer" onclick="stopPropagation(event)">
                            <asp:ImageButton runat="server" ID="promotions" ImageUrl="images/special.gif"
                                OnClientClick="showSpecialOffers();return false;" />
                        </div>
                    </HeaderTemplate>
                    <ContentTemplate>
                        <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="multiPage">
                            <telerik:RadPageView runat="server" ID="RadPageView1">
                                <ul class="productList">
                                    <li>
                                        <img src="images/exposure.gif" alt="Understanding Exposure" />
                                        <div>
                                            Understanding Exposure:<br />
                                            How to Shoot Great Photographs
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/digitalCamera.gif" alt="The Ultimage Guide" />
                                        <div>
                                            Get the Most from Your<br />
                                            Digital Camera: The Ultimate Guide
                                        </div>
                                    </li>
                                    <li class="last">
                                        <img src="images/slr.gif" alt="Digital SLR Cameras" />
                                        <div>
                                            Digital SLR Cameras:<br />
                                            Photography for Dummies
                                        </div>
                                    </li>
                                </ul>
                            </telerik:RadPageView>
                            <telerik:RadPageView runat="server" ID="RadPageView2">
                                <ul class="productList">
                                    <li>
                                        <img src="images/SD1000.gif" alt="Cannon PowerShot SD1000" />
                                        <div>
                                            Cannon PowerShot SD1000
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/A570IS.gif" alt="Cannon PowerShot A570IS" />
                                        <div>
                                            Cannon PowerShot A570IS
                                        </div>
                                    </li>
                                    <li class="last">
                                        <img src="images/kidizoom.gif" alt="VTech Kidizoom" />
                                        <div>
                                            VTech Kidizoom
                                        </div>
                                    </li>
                                </ul>
                            </telerik:RadPageView>
                            <telerik:RadPageView runat="server" ID="RadPageView3">
                                <ul class="productList">
                                    <li>
                                        <img src="images/case.gif" alt="Airform Digital Camera Case" />
                                        <div>
                                            Airform Digital Camera Case
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/largeCase.gif" alt="Case Logic Large" />
                                        <div>
                                            Case Logic Large
                                        </div>
                                    </li>
                                    <li class="last">
                                        <img src="images/waterproof.gif" alt="Lewis N. Clark Waterproof Case" />
                                        <div>
                                            Lewis N. Clark Waterproof Case
                                        </div>
                                    </li>
                                </ul>
                            </telerik:RadPageView>
                        </telerik:RadMultiPage>
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Customer testmonials" Expanded="false">
                    <ContentTemplate>
                        <img src="images/Testimonials.gif" alt="Testimonials" style="margin: 0 auto" width="740"
                            height="157" />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="How to find us" Expanded="false">
                    <ContentTemplate>
                        <img src="images/How-to-find-us.gif" alt="How to find us" style="margin: 0 auto"
                            width="740" height="156" />
                    </ContentTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>

    <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" Skin="Telerik" Behaviors="Close, Move"
        Modal="true" Width="440" Height="385">
        <ContentTemplate>
            <img id="Img1" src="images/discount.jpg" runat="server" alt="promotions" />
        </ContentTemplate>
    </telerik:RadWindow>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?