ToolBar

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.

RadToolBar - Telerik's ASP.NET ToolBar

tlrk.it/19l9Kbs To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/19l9Kbs

About RadToolBar for ASP.NET AJAX

Simulate the versatility of desktop toolbars, using the flexible AJAX driven RadToolbar component for implementation of tool and button strips. Its powerful customization capabilities and rich collection of toolbar items allow you to craft every button on the toolbar independently to either display text, image or both. Complicated Office2010-like Ribbon toolbars should not be a mirage for you, but an achievable reality with the help of Telerik Toolbar control.

RadToolBar and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular ToolBar demo, you can use the following path to find it in the sample website application:
toolbar/examples/overview

Key Features

  • Powerful databinding
  • Rich client-side API providing the ability to add/delete items at the client-side 
  • XHTML and Accessibility standards compliancy
  • Expand Animations
  • Skinned Appearance
  • Template Support
  • Horizontal or Vertical Orientation
  • Keyboard Shortcut Support
  • Button Groups that simulate radio-button functionality

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true"  %>

<%@ Register Src="~/ToolBar/Examples/Overview/Info.ascx" TagPrefix="qsf" TagName="Info" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>ASP.NET AJAX ToolBar Examples | RadToolBar control</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <div id="wrapper">
        <div id="mainToolBarWrapper">
            <telerik:RadToolBar ID="mainToolBar" runat="server" Style="z-index: 90001" Width="722px"
                Skin="Office2007" EnableRoundedCorners="true" EnableShadows="true" OnClientButtonClicking="clientButtonClicking">
                <Items>
                    <telerik:RadToolBarSplitButton ImageUrl="Img/new.gif"
                        EnableDefaultButton="false" AccessKey="N" Text="<u>N</u>ew" ToolTip="New">
                        <Buttons>
                            <telerik:RadToolBarButton ImageUrl="Img/newMailMessage.gif"
                                Text="Mail Message" ToolTip="New Mail Message">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newPost.gif"
                                Text="Post in This Folder" ToolTip="New Post in This Folder">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newFolder.gif"
                                Text="Folder..." ToolTip="New Folder...">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newSearchFolder.gif"
                                Text="Search Folder..." ToolTip="New Search Folder...">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Navigation Pane Shortcut...">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newAppointment.gif"
                                Text="Appointment" ToolTip="New Appointment">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newMeetingRequest.gif"
                                Text="Meeting Request" ToolTip="New Meeting Request">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newContact.gif"
                                Text="Contact" ToolTip="New Contact">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newDistributionList.gif"
                                Text="Distribution List" ToolTip="New Distribution List">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newTask.gif"
                                Text="Task" ToolTip="New Task">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newTaskRequest.gif"
                                Text="Task Request" ToolTip="New Task Request">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newJournalEntry.gif"
                                Text="Journal Entry" ToolTip="New Journal Entry">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newNote.gif"
                                Text="Note" ToolTip="New Note">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/newInternetFax.gif"
                                Text="Internet Fax" ToolTip="New Internet Fax">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Choose Form...">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Outlook Data File...">
                            </telerik:RadToolBarButton>
                        </Buttons>
                    </telerik:RadToolBarSplitButton>
                    <telerik:RadToolBarButton IsSeparator="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Img/print.gif"
                        ToolTip="Print">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Img/moveToFolder.gif"
                        ToolTip="Move to Folder">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Img/delete.gif"
                        ToolTip="Delete">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton IsSeparator="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Img/reply.gif"
                        AccessKey="R" Text="<u>R</u>eply" ToolTip="Reply">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton IsSeparator="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarDropDown ImageUrl="Img/categorize.gif"
                        ToolTip="Categorize">
                        <Buttons>
                            <telerik:RadToolBarButton Enabled="false" Text="Clear All Categories" ToolTip="Clear All Categories">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/createCategorySearchFolder.gif"
                                Text="Create Category Search Folder" ToolTip="Create Category Search Folder">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/blueCategory.gif"
                                Text="Blue Category" ToolTip="Blue Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/greenCategory.gif"
                                Text="Green Category" ToolTip="Green Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/orangeCategory.gif"
                                Text="Orange Category" ToolTip="Orange Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/purpleCategory.gif"
                                Text="Purple Category" ToolTip="Purple Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/redCategory.gif"
                                Text="Purple Category" ToolTip="Red Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/yellowCategory.gif"
                                Text="Yellow Category" ToolTip="Yellow Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/allCategories.gif"
                                Text="All Categories..." ToolTip="All Categories...">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Set Quick Click..." ToolTip="Set Quick Click...">
                            </telerik:RadToolBarButton>
                        </Buttons>
                    </telerik:RadToolBarDropDown>
                    <telerik:RadToolBarButton ImageUrl="Img/followUp.gif"
                        ToolTip="Follow Up">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton IsSeparator="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarSplitButton ImageUrl="Img/sendReceive.gif"
                        Text="Send/Receive" EnableDefaultButton="false" ToolTip="Send/Receive">
                        <Buttons>
                            <telerik:RadToolBarButton Text="Send/Receive All" ToolTip="Send/Receive All">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Send All" ToolTip="Send All">
                            </telerik:RadToolBarButton>
                        </Buttons>
                    </telerik:RadToolBarSplitButton>
                    <telerik:RadToolBarButton>
                        <ItemTemplate>
                            <asp:TextBox ID="txtSearchQuery" runat="server" CssClass="QueryString" Width="110px"></asp:TextBox>
                        </ItemTemplate>
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarDropDown Text="Search">
                        <Buttons>
                            <telerik:RadToolBarButton ImageUrl="Img/google.gif"
                                Value="SearchGoogle" Text="Google" NavigateUrl="http://www.google.com" Target="_blank">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/yahoo.gif"
                                Value="SearchYahoo" Text="Yahoo" NavigateUrl="http://www.yahoo.com" Target="_blank">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/altavista.gif"
                                Value="SearchAltaVista" Text="AltaVista" NavigateUrl="http://www.google.com"
                                Target="_blank">
                            </telerik:RadToolBarButton>
                        </Buttons>
                    </telerik:RadToolBarDropDown>
                    <telerik:RadToolBarSplitButton>
                        <Buttons>
                            <telerik:RadToolBarButton ImageUrl="Img/help.gif"
                                Text="Help" NavigateUrl="http://www.telerik.com/help" Target="_blank">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Img/telerik.gif"
                                Text="Home" NavigateUrl="http://www.telerik.com" Target="_blank">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Support" NavigateUrl="http://www.telerik.com/support"
                                Target="_blank">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Community" NavigateUrl="http://www.telerik.com/community"
                                Target="_blank">
                            </telerik:RadToolBarButton>
                        </Buttons>
                    </telerik:RadToolBarSplitButton>
                </Items>
            </telerik:RadToolBar>
        </div>
        <div id="subToolBarWrapper">
            <telerik:RadToolBar ID="RadToolBar1" runat="server" Skin="Office2007">
                <Items>
                    <telerik:RadToolBarButton ImageUrl="Img/send.gif"
                        Text="Send" ToolTip="Send">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarSplitButton ImageUrl="Img/attach.gif"
                        EnableDefaultButton="false">
                        <Buttons>
                            <telerik:RadToolBarButton ImageUrl="Img/attach.gif"
                                Text="File" ToolTip="Attach File">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Item" ToolTip="Attach Item">
                            </telerik:RadToolBarButton>
                        </Buttons>
                    </telerik:RadToolBarSplitButton>
                    <telerik:RadToolBarButton IsSeparator="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Img/bold.gif"
                        CheckOnClick="true" Group="Bold" AllowSelfUnCheck="true" ToolTip="Bold">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Img/italic.gif"
                        CheckOnClick="true" Group="Italic" AllowSelfUnCheck="true" ToolTip="Italic">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Img/underline.gif"
                        CheckOnClick="true" Group="Underline" AllowSelfUnCheck="true" ToolTip="Underline">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton IsSeparator="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Img/left.gif"
                        ToolTip="Align Left" CheckOnClick="true" Group="Align" Checked="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Img/center.gif"
                        ToolTip="Align Center" CheckOnClick="true" Group="Align">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Img/right.gif"
                        ToolTip="Align Right" CheckOnClick="true" Group="Align">
                    </telerik:RadToolBarButton>
                </Items>
            </telerik:RadToolBar>
        </div>
    </div>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/ToolBar.png" AlternateText="tlrk.it/19l9Kbs" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/19l9Kbs">tlrk.it/19l9Kbs</a>
    </div>
    </form>
</body>
</html>