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

ToolBar / First Look


  • RadToolBar is a flexible component for implementation of tool strips found in most web applications. When integrated with RadDock, RadToolBar mimics the versatility of desktop toolbars, which can be floating, dockable, re-ordered, with automatic orientation adjustment, and advanced databinding.

    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
    • Horizontal or Vertical Orientation
    • Keyboard Shortcut Support
    • Text-only, Image-only, or Mixed buttons
    • Button Groups that simulate radio-button functionality

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ToolBar.Functionality.Basic.DefaultVB" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ 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" %>
    <%@ 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 id="Head1" runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1" />
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm">
            <telerik:RadScriptManager ID="ScriptManager" runat="server" />
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="VB" ShowSkinChooser="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="~/ToolBar/Examples/Functionality/FirstLook/Img/new.gif" EnableDefaultButton="false" AccessKey="N" Text="<u>N</u>ew" ToolTip="New">
                                <Buttons>
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newMailMessage.gif" Text="Mail Message" ToolTip="New Mail Message" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newPost.gif" Text="Post in This Folder" ToolTip="New Post in This Folder" />
                                    <telerik:RadToolBarButton IsSeparator="true" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newFolder.gif" Text="Folder..." ToolTip="New Folder..." />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newSearchFolder.gif" Text="Search Folder..." ToolTip="New Search Folder..." />
                                    <telerik:RadToolBarButton Text="Navigation Pane Shortcut..." />
                                    <telerik:RadToolBarButton IsSeparator="true" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newAppointment.gif" Text="Appointment" ToolTip="New Appointment" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newMeetingRequest.gif" Text="Meeting Request" ToolTip="New Meeting Request" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newContact.gif" Text="Contact" ToolTip="New Contact" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newDistributionList.gif" Text="Distribution List" ToolTip="New Distribution List" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newTask.gif" Text="Task" ToolTip="New Task" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newTaskRequest.gif" Text="Task Request" ToolTip="New Task Request" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newJournalEntry.gif" Text="Journal Entry" ToolTip="New Journal Entry" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newNote.gif" Text="Note" ToolTip="New Note" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/newInternetFax.gif" Text="Internet Fax" ToolTip="New Internet Fax" />
                                    <telerik:RadToolBarButton IsSeparator="true" />
                                    <telerik:RadToolBarButton Text="Choose Form..." />
                                    <telerik:RadToolBarButton IsSeparator="true" />
                                    <telerik:RadToolBarButton Text="Outlook Data File..." />
                                </Buttons>
                            </telerik:RadToolBarSplitButton>
                            <telerik:RadToolBarButton IsSeparator="true" />
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/print.gif" ToolTip="Print" />
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/moveToFolder.gif" ToolTip="Move to Folder" />
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/delete.gif" ToolTip="Delete" />
                            <telerik:RadToolBarButton IsSeparator="true" />
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/reply.gif" AccessKey="R" Text="<u>R</u>eply" ToolTip="Reply" />
                            <telerik:RadToolBarButton IsSeparator="true" />
                            <telerik:RadToolBarDropDown ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/categorize.gif" ToolTip="Categorize">
                                <Buttons>
                                    <telerik:RadToolBarButton Enabled="false" Text="Clear All Categories" ToolTip="Clear All Categories" />
                                    <telerik:RadToolBarButton IsSeparator="true" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/createCategorySearchFolder.gif" Text="Create Category Search Folder" ToolTip="Create Category Search Folder" />
                                    <telerik:RadToolBarButton IsSeparator="true" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/blueCategory.gif" Text="Blue Category" ToolTip="Blue Category" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/greenCategory.gif" Text="Green Category" ToolTip="Green Category" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/orangeCategory.gif" Text="Orange Category" ToolTip="Orange Category" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/purpleCategory.gif" Text="Purple Category" ToolTip="Purple Category" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/redCategory.gif" Text="Purple Category" ToolTip="Red Category" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/yellowCategory.gif" Text="Yellow Category" ToolTip="Yellow Category" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/allCategories.gif" Text="All Categories..." ToolTip="All Categories..." />
                                    <telerik:RadToolBarButton IsSeparator="true" />
                                    <telerik:RadToolBarButton Text="Set Quick Click..." ToolTip="Set Quick Click..." />
                                </Buttons>
                            </telerik:RadToolBarDropDown>
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/followUp.gif" ToolTip="Follow Up" />
                            <telerik:RadToolBarButton IsSeparator="true" />
                            <telerik:RadToolBarSplitButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/sendReceive.gif" Text="Send/Receive" EnableDefaultButton="false" ToolTip="Send/Receive">
                                <Buttons>
                                    <telerik:RadToolBarButton Text="Send/Receive All" ToolTip="Send/Receive All" />
                                    <telerik:RadToolBarButton Text="Send All" ToolTip="Send All" />
                                </Buttons>
                            </telerik:RadToolBarSplitButton>
                            <telerik:RadToolBarButton>
                                <ItemTemplate>
                                    <asp:TextBox ID="txtSearchQuery" runat="server" CssClass="QueryString" Width="110px" />
                                </ItemTemplate>
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarDropDown Text="Search">
                                <Buttons>
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/google.gif" Value="SearchGoogle" Text="Google" NavigateUrl="http://www.google.com" Target="_blank" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/yahoo.gif" Value="SearchYahoo" Text="Yahoo" NavigateUrl="http://www.yahoo.com" Target="_blank" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/altavista.gif" Value="SearchAltaVista" Text="AltaVista" NavigateUrl="http://www.google.com" Target="_blank" />
                                </Buttons>
                            </telerik:RadToolBarDropDown>
                            <telerik:RadToolBarSplitButton>
                                <Buttons>
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/help.gif" Text="Help" NavigateUrl="http://www.telerik.com/help" Target="_blank" />
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/telerik.gif" Text="Home" NavigateUrl="http://www.telerik.com" Target="_blank" />
                                    <telerik:RadToolBarButton Text="Support" NavigateUrl="http://www.telerik.com/support" Target="_blank" />
                                    <telerik:RadToolBarButton Text="ClientNet" NavigateUrl="http://www.telerik.com/clientNet" Target="_blank" />
                                    <telerik:RadToolBarButton Text="Community" NavigateUrl="http://www.telerik.com/community" Target="_blank" />
                                </Buttons>
                            </telerik:RadToolBarSplitButton>
                        </Items>
                    </telerik:RadToolBar>
                </div>
                <div id="subToolBarWrapper">
                    <telerik:RadToolBar
                        ID="RadToolBar1" runat="server"
                        Skin="Office2007">
                        <Items>
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/send.gif" Text="Send" ToolTip="Send" />
                            <telerik:RadToolBarSplitButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/attach.gif" EnableDefaultButton="false">
                                <Buttons>
                                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/attach.gif" Text="File" ToolTip="Attach File" />
                                    <telerik:RadToolBarButton Text="Item" ToolTip="Attach Item" />
                                </Buttons>
                            </telerik:RadToolBarSplitButton>
                            <telerik:RadToolBarButton IsSeparator="true" />
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/bold.gif" CheckOnClick="true" Group="Bold" AllowSelfUnCheck="true" ToolTip="Bold" />
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/italic.gif" CheckOnClick="true" Group="Italic" AllowSelfUnCheck="true" ToolTip="Italic" />
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/underline.gif" CheckOnClick="true" Group="Underline" AllowSelfUnCheck="true" ToolTip="Underline" />
                            <telerik:RadToolBarButton IsSeparator="true" />
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/left.gif" ToolTip="Align Left" CheckOnClick="true" Group="Align" Checked="true" />
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/center.gif" ToolTip="Align Center" CheckOnClick="true" Group="Align" />
                            <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/FirstLook/Img/right.gif" ToolTip="Align Right" CheckOnClick="true" Group="Align" />
                        </Items>
                    </telerik:RadToolBar>
                </div>
            </div>
        
            <script type="text/javascript">
                /* <![CDATA[ */
                function clientButtonClicking(sender, args)
                {
                    var toolBar = sender;
                    var button = args.get_item();
                    if (button.get_value() == "SearchGoogle" ||
                        button.get_value() == "SearchYahoo" ||
                        button.get_value() == "SearchAltaVista")
                    {
                        var textElement = toolBar.get_items().getItem(12).get_element().getElementsByTagName("input")[0];
                        var searchQuery = textElement.value;
                        if (!searchQuery)
                        {
                            alert("Please specify search criteria!");
                            args.set_cancel(true);
                        }

                        var urlFormat = "";
                        if (button.get_value() == "SearchGoogle")
                        {
                            urlFormat = "http://www.google.com/search?q={0}&ie=utf-8&oe=utf-8&aq=t";
                        } else if (button.get_value() == "SearchYahoo")
                        {
                            urlFormat = "http://search.yahoo.com/search?p={0}&fr=yfp-t-501&toggle=1&cop=mss&ei=UTF-8";
                        } else if (button.get_value() == "SearchAltaVista")
                        {
                            urlFormat = "http://www.altavista.com/web/results?itag=ody&q={0}&kgs=1&kls=0";
                        }
                        button.set_navigateUrl(String.format(urlFormat, searchQuery));
                    }
                }
                /* ]]> */
            </script>
            
            <qsf:Footer runat="server" ID="Footer1" />
        </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