Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

PanelBar / First Look


  • Telerik RadPanelBar is a versatile component for building collapsible side-menu systems and Outlook-type panels. It is developed to facilitate what is found in almost any web-site - the typical left/right-side navigation, which cannot be achieved using the conventional drop-down menu components.

    Key Features

    • Semantic rendering for minimal HTML markup
    • Powerful databinding
    • Rich client-side API providing the ability to add/delete items at the client-side
    • XHTML and Accessibility standards compliancy
    • Search Engine Friendly
    • Extensive design-time support
    • Expand Animations
    • Skinned Appearance
    • Custom Attributes
    • Template Support
    • Right to left support
    • Multi-level panels, treeview-like nesting
    • Keyboard Support
    • Single expanded panel option

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.PanelBar.Functionality.FirstLook.DefaultCS" %>

    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        
        <style type="text/css">
         /* RadPanelBar needs to know the height of the images to calculate
         its height accordingly when the images are not loaded yet. */
         .RadPanelBar .rpImage
         {
             height: 19px;
         }
         .RadPanelBar .rpLevel1 .rpImage
         {
             height: 16px;
         }
        </style>
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
            <telerik:RadScriptManager ID="ScriptManager" runat="server" />
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#" XhtmlCompliant="False" />
            
            <telerik:RadPanelBar
                runat="server" ID="RadPanelBar1"
                Height="380px"
                ExpandMode="FullExpandedItem">
                <Items>
                    <telerik:RadPanelItem Text="Mail" ImageUrl="Img/mail.gif" Expanded="True">
                        <Items>
                            <telerik:RadPanelItem ImageUrl="Img/mailPersonalFolders.gif" Text="Personal Folders" />
                            <telerik:RadPanelItem ImageUrl="Img/mailDeletedItems.gif" Text="Deleted Items" />
                            <telerik:RadPanelItem ImageUrl="Img/mailInbox.gif" Text="Inbox" />
                            <telerik:RadPanelItem ImageUrl="Img/mailFolder.gif" Text="My Mail" />
                            <telerik:RadPanelItem ImageUrl="Img/mailSent.gif" Text="Sent Items" />
                            <telerik:RadPanelItem ImageUrl="Img/mailOutbox.gif" Text="Outbox" />
                            <telerik:RadPanelItem ImageUrl="Img/mailSearch.gif" Text="Search Folders" />
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Calendar" ImageUrl="Img/calendar.gif">
                        <Items>
                            <telerik:RadPanelItem>
                                <ItemTemplate>
                                    <telerik:RadCalendar runat="server" ID="Calendar1" Style="margin: 6px auto 0" />
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Contacts" ImageUrl="Img/contacts.gif">
                        <Items>
                            <telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="My Contacts" />
                            <telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="Address Cards" />
                            <telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="Phone List" />
                            <telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="Shared Contacts" />
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Tasks" ImageUrl="Img/tasks.gif">
                        <Items>
                            <telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="My Tasks" />
                            <telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="Shared Tasks" />
                            <telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="Active Tasks" />
                            <telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="Completed Tasks" />
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Notes" ImageUrl="Img/notes.gif">
                        <Items>
                            <telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="My Notes" />
                            <telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="Notes List" />
                            <telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="Shared Notes" />
                            <telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="Archive" />
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Folders List" ImageUrl="Img/folderList.gif">
                        <Items>
                            <telerik:RadPanelItem ImageUrl="Img/mailOutbox.gif" Text="My Client.Net" />
                            <telerik:RadPanelItem ImageUrl="Img/mailOutbox.gif" Text="My Profile" />
                            <telerik:RadPanelItem ImageUrl="Img/mailOutbox.gif" Text="My Support Tickets" />
                            <telerik:RadPanelItem ImageUrl="Img/mailOutbox.gif" Text="My Licenses" />
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
            
            <qsf:Footer ID="Footer1" runat="server" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451