RadToolBar - Telerik ASP.NET ToolBar

Isolate this demo as a stand-alone application

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.

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

More about ToolBar for ASP.NET AJAX

<%@ Page AutoEventWireup="true"  %>

<%@ 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 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 ID="mainToolBar" runat="server" Style="z-index: 90001" 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 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>

Find Assistance

Help Us Improve

Was this example helpful?