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

WebForms ToolBar Overview

  • Button
  • Toggle button
  • Group:
  • Left
  • Center
  • Right
  • Drop down
    • Bold
    • Italic
    • Underline
  • Split button
    • Common action
    • Another common action
    • Action
  • Navigate!
  • Template:
    Pick Color(Current Color is blank)

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>
</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">
        <telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server" EnableRoundedCorners="true" EnableShadows="true" Width="950px">
            <Items>
                <telerik:RadToolBarButton Text="Button">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton IsSeparator="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Toggle button" CheckOnClick="true" Checked="true"
                    AllowSelfUnCheck="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton IsSeparator="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton>
                    <ItemTemplate>
                        <span class="templateText">Group:</span>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/ItemTypes/images/left.png"
                    Text="Left" Group="Align" CheckOnClick="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/ItemTypes/images/center.png"
                    Text="Center" Group="Align" CheckOnClick="true" Checked="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/ItemTypes/images/right.png"
                    Text="Right" Group="Align" CheckOnClick="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton IsSeparator="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarDropDown Text="Drop down">
                    <Buttons>
                        <telerik:RadToolBarButton Text="Bold" ImageUrl="~/ToolBar/Examples/Functionality/ItemTypes/images/bold.png"
                            Group="Bold" CheckOnClick="true" AllowSelfUnCheck="true">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Italic" ImageUrl="~/ToolBar/Examples/Functionality/ItemTypes/images/italic.png"
                            Group="Italic" CheckOnClick="true" AllowSelfUnCheck="true">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Underline" ImageUrl="~/ToolBar/Examples/Functionality/ItemTypes/images/underline.png"
                            Group="Underline" CheckOnClick="true" AllowSelfUnCheck="true">
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarDropDown>
                <telerik:RadToolBarButton IsSeparator="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="Split button">
                    <Buttons>
                        <telerik:RadToolBarButton Text="Common action">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Another common action">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton IsSeparator="true">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Action">
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarSplitButton>
                <telerik:RadToolBarButton IsSeparator="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Navigate!" NavigateUrl="http://www.telerik.com/community"
                    Target="_blank">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton IsSeparator="true">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton>
                    <ItemTemplate>
                        <table style="display: block;">
                            <tr>
                                <td class="templateText">Template:
                                </td>
                                <td>
                                    <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker1" Preset="Standard" ShowIcon="true">
                                    </telerik:RadColorPicker>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
            </Items>
        </telerik:RadToolBar>
        </div>

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

Support & Learning Resources

Find Assistance