PanelBar

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

PanelBar - Sliding PanelBar

With RadPanelBar you can define side bars just like in Visual Studio.NET. To accomplish this JavaScript functions and CSS styles should be used as shown in this example. 

C# VB
Show code in new window Demo isolation steps
<%@ 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>ASP.NET PanelBar Demo - Sliding PanelBar</title>
     <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

     <div class="qsf-demo-canvas">

          <div class="left-pane">
               <input type="image" id="left-button" class="button" src="Img/Toolbox.gif" />
               <div class="sliding-pane">
                    <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Height="250" ExpandMode="FullExpandedItem">
                         <Items>
                              <telerik:RadPanelItem Expanded="True" Text="UI for ASP.NET AJAX">
                                   <Items>
                                        <telerik:RadPanelItem Text="RadComboBox" ImageUrl="img/ComboboxPr.gif" />
                                        <telerik:RadPanelItem Text="RadMenu" ImageUrl="img/MenuPr.gif" />
                                        <telerik:RadPanelItem Text="RadTabStrip" ImageUrl="img/TabstripPr.gif" />
                                        <telerik:RadPanelItem Text="RadPanelBar" ImageUrl="img/PanelBarPr.gif" />
                                        <telerik:RadPanelItem Text="RadTreeView" ImageUrl="img/TreeviewPr.gif" />
                                        <telerik:RadPanelItem Text="RadToolBar" ImageUrl="img/ToolbarPr.gif" />
                                        <telerik:RadPanelItem Text="RadChart" ImageUrl="img/ChartPr.gif" />
                                   </Items>
                              </telerik:RadPanelItem>
                              <telerik:RadPanelItem Text="UI for WinForms">
                                   <Items>
                                        <telerik:RadPanelItem Text="RadComboBox" ImageUrl="img/Combobox_Win.gif" />
                                        <telerik:RadPanelItem Text="RadDock" ImageUrl="img/Dock_Win.gif" />
                                        <telerik:RadPanelItem Text="RadGridView" ImageUrl="img/RadGrid.bmp" />
                                        <telerik:RadPanelItem Text="RadTabStrip" ImageUrl="img/Tabstrip_Win.gif" />
                                   </Items>
                              </telerik:RadPanelItem>
                              <telerik:RadPanelItem Text="Other projects">
                                   <Items>
                                        <telerik:RadPanelItem Text="SiteFinity" ImageUrl="img/st.gif" />
                                        <telerik:RadPanelItem Text="Reporting" ImageUrl="img/report.gif" />
                                   </Items>
                              </telerik:RadPanelItem>
                         </Items>
                    </telerik:RadPanelBar>
               </div>
          </div>

          <div class="right-pane">
               <input type="image" id="right-button" class="button" src="Img/Toolbox.gif" />
               <div class="sliding-pane">
                    <telerik:RadPanelBar runat="server" ID="RadPanelBar2" Height="250" ExpandMode="FullExpandedItem">
                         <Items>
                              <telerik:RadPanelItem Expanded="True" Text="UI for ASP.NET AJAX">
                                   <Items>
                                        <telerik:RadPanelItem Text="RadComboBox" ImageUrl="img/ComboboxPr.gif" />
                                        <telerik:RadPanelItem Text="RadMenu" ImageUrl="img/MenuPr.gif" />
                                        <telerik:RadPanelItem Text="RadTabStrip" ImageUrl="img/TabstripPr.gif" />
                                        <telerik:RadPanelItem Text="RadPanelBar" ImageUrl="img/PanelBarPr.gif" />
                                        <telerik:RadPanelItem Text="RadTreeView" ImageUrl="img/TreeviewPr.gif" />
                                        <telerik:RadPanelItem Text="RadToolBar" ImageUrl="img/ToolbarPr.gif" />
                                        <telerik:RadPanelItem Text="RadChart" ImageUrl="img/ChartPr.gif" />
                                   </Items>
                              </telerik:RadPanelItem>
                              <telerik:RadPanelItem Text="UI for WinForms">
                                   <Items>
                                        <telerik:RadPanelItem Text="RadComboBox" ImageUrl="img/Combobox_Win.gif" />
                                        <telerik:RadPanelItem Text="RadDock" ImageUrl="img/Dock_Win.gif" />
                                        <telerik:RadPanelItem Text="RadGridView" ImageUrl="img/RadGrid.bmp" />
                                        <telerik:RadPanelItem Text="RadTabStrip" ImageUrl="img/Tabstrip_Win.gif" />
                                   </Items>
                              </telerik:RadPanelItem>
                              <telerik:RadPanelItem Text="Other projects">
                                   <Items>
                                        <telerik:RadPanelItem Text="SiteFinity" ImageUrl="img/st.gif" />
                                        <telerik:RadPanelItem Text="Reporting" ImageUrl="img/report.gif" />
                                   </Items>
                              </telerik:RadPanelItem>
                         </Items>
                    </telerik:RadPanelBar>
               </div>
          </div>

     </div>

     <telerik:RadScriptBlock runat="server">
          <script type="text/javascript">
               var leftPanel = $get('<%=RadPanelBar1.ClientID %>');
               var leftButton = document.getElementById( "left-button" );

               if (leftPanel) {
                    SetUpAnimation(leftButton, Telerik.Web.UI.jSlideDirection.Right, leftPanel);
               }

               var rightPanel = $get('<%=RadPanelBar2.ClientID %>');
               var rightButton = document.getElementById( "right-button" );

               if (rightPanel) {
                    SetUpAnimation(rightButton, Telerik.Web.UI.jSlideDirection.Left, rightPanel);
               }

               function SetUpAnimation(button, direction, element) {
                    element.style.position = "relative";

                    var expanded = false;

                    var expandAnimation = new Telerik.Web.UI.AnimationSettings({});
                    var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});

                    var slide = new Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation, false);

                    slide.initialize();

                    slide.set_direction(direction);

                    button.onclick = function() {
                         element.parentNode.style.visibility = "visible";
                         element.parentNode.style.display = "block";
                         if (!expanded) {
                              slide.expand();
                         }
                         else {
                              slide.collapse();
                         }
                         expanded = !expanded;
                         return false;
                    }
               }
          </script>
     </telerik:RadScriptBlock>

    </form>
</body>
</html>