New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms ToolBar Overview

  • NewNew
    • New Mail MessageMail Message
    • New Post in This FolderPost in This Folder
    • New Folder...Folder...
    • New Search Folder...Search Folder...
    • Navigation Pane Shortcut...
    • New AppointmentAppointment
    • New Meeting RequestMeeting Request
    • New ContactContact
    • New Distribution ListDistribution List
    • New TaskTask
    • New Task RequestTask Request
    • New Journal EntryJournal Entry
    • New NoteNote
    • New Internet FaxInternet Fax
    • Choose Form...
    • Outlook Data File...
  • Print
  • Move to Folder
  • Delete
  • ReplyReply
  • Categorize
    • Clear All Categories
    • Create Category Search FolderCreate Category Search Folder
    • Blue CategoryBlue Category
    • Green CategoryGreen Category
    • Orange CategoryOrange Category
    • Purple CategoryPurple Category
    • Red CategoryPurple Category
    • Yellow CategoryYellow Category
    • All Categories...All Categories...
    • Set Quick Click...
  • Follow Up
  • Send/ReceiveSend/Receive
    • Send/Receive All
    • Send All
  • Search
  • Help
  • SendSend
    • Attach FileFile
    • Item
  • Bold
  • Italic
  • Underline
  • Align Left
  • Align Center
  • Align Right

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. The control is also fully responsive and fits perfectly even on small screen sizes like smartphones and tablets.

RadToolBar and 120+ 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.

Key Features

  • Responsive Rendering
  • 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

More about RadToolBar for ASP.NET AJAX
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</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:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <div id="mainToolBarWrapper">
            <telerik:RadToolBar RenderMode="Lightweight" ID="mainToolBar" runat="server" Width="722px"
                Skin="Office2007" EnableRoundedCorners="true" EnableShadows="true" OnClientButtonClicking="clientButtonClicking">
                <Items>
                    <telerik:RadToolBarSplitButton ImageUrl="Images/new.gif"
                        EnableDefaultButton="false" AccessKey="N" Text="<u>N</u>ew" ToolTip="New">
                        <Buttons>
                            <telerik:RadToolBarButton ImageUrl="Images/newMailMessage.gif"
                                Text="Mail Message" ToolTip="New Mail Message">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/newPost.gif"
                                Text="Post in This Folder" ToolTip="New Post in This Folder">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/newFolder.gif"
                                Text="Folder..." ToolTip="New Folder...">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/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="Images/newAppointment.gif"
                                Text="Appointment" ToolTip="New Appointment">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/newMeetingRequest.gif"
                                Text="Meeting Request" ToolTip="New Meeting Request">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/newContact.gif"
                                Text="Contact" ToolTip="New Contact">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/newDistributionList.gif"
                                Text="Distribution List" ToolTip="New Distribution List">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/newTask.gif"
                                Text="Task" ToolTip="New Task">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/newTaskRequest.gif"
                                Text="Task Request" ToolTip="New Task Request">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/newJournalEntry.gif"
                                Text="Journal Entry" ToolTip="New Journal Entry">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/newNote.gif"
                                Text="Note" ToolTip="New Note">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/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="Images/print.gif"
                        ToolTip="Print">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Images/moveToFolder.gif"
                        ToolTip="Move to Folder">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Images/delete.gif"
                        ToolTip="Delete">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton IsSeparator="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Images/reply.gif"
                        AccessKey="R" Text="<u>R</u>eply" ToolTip="Reply">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton IsSeparator="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarDropDown ImageUrl="Images/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="Images/createCategorySearchFolder.gif"
                                Text="Create Category Search Folder" ToolTip="Create Category Search Folder">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/blueCategory.gif"
                                Text="Blue Category" ToolTip="Blue Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/greenCategory.gif"
                                Text="Green Category" ToolTip="Green Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/orangeCategory.gif"
                                Text="Orange Category" ToolTip="Orange Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/purpleCategory.gif"
                                Text="Purple Category" ToolTip="Purple Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/redCategory.gif"
                                Text="Purple Category" ToolTip="Red Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/yellowCategory.gif"
                                Text="Yellow Category" ToolTip="Yellow Category">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/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="Images/followUp.gif"
                        ToolTip="Follow Up">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton IsSeparator="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarSplitButton ImageUrl="Images/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="Images/google.gif"
                                Value="SearchGoogle" Text="Google" NavigateUrl="http://www.google.com" Target="_blank">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/yahoo.gif"
                                Value="SearchYahoo" Text="Yahoo" NavigateUrl="http://www.yahoo.com" Target="_blank">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/altavista.gif"
                                Value="SearchAltaVista" Text="AltaVista" NavigateUrl="http://www.google.com"
                                Target="_blank">
                            </telerik:RadToolBarButton>
                        </Buttons>
                    </telerik:RadToolBarDropDown>
                    <telerik:RadToolBarSplitButton>
                        <Buttons>
                            <telerik:RadToolBarButton ImageUrl="Images/help.gif"
                                Text="Help" NavigateUrl="http://www.telerik.com/help" Target="_blank">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton ImageUrl="Images/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 RenderMode="Lightweight" ID="RadToolBar1" runat="server" Skin="Office2007">
                <Items>
                    <telerik:RadToolBarButton ImageUrl="Images/send.gif"
                        Text="Send" ToolTip="Send">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarSplitButton ImageUrl="Images/attach.gif"
                        EnableDefaultButton="false">
                        <Buttons>
                            <telerik:RadToolBarButton ImageUrl="Images/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="Images/bold.gif"
                        CheckOnClick="true" Group="Bold" AllowSelfUnCheck="true" ToolTip="Bold">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Images/italic.gif"
                        CheckOnClick="true" Group="Italic" AllowSelfUnCheck="true" ToolTip="Italic">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Images/underline.gif"
                        CheckOnClick="true" Group="Underline" AllowSelfUnCheck="true" ToolTip="Underline">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton IsSeparator="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Images/left.gif"
                        ToolTip="Align Left" CheckOnClick="true" Group="Align" Checked="true">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Images/center.gif"
                        ToolTip="Align Center" CheckOnClick="true" Group="Align">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Images/right.gif"
                        ToolTip="Align Right" CheckOnClick="true" Group="Align">
                    </telerik:RadToolBarButton>
                </Items>
            </telerik:RadToolBar>
        </div>
    </div>

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

Support & Learning Resources

Find Assistance