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

Images

  • BackBack
  • ForwardForward
  • BoldBold
  • ItalicItalic
  • UnderlineUnderline
  • AlignAlign
    • Align LeftLeft
    • Align CenterCenter
    • Align RightRight
  • Set Color RedRed
    • Set Color RedRed
    • Set Color BlueBlue
    • Set Color GreenGreen
  • Demo Configurator
Display Type
Image position

There are three ways toolbar items can look. You can customize every item and made it look unique. You can use either display text, picture or both.

Use the ImageUrl property to specify the URL to the image, which the RadToolBarItem will use. If you want the item to display only an image without a text, you should set the Text property to an empty string.

Use the ImagePosition property of the RadToolBarItem to specify whether the image should be displayed to the left, right, top or bottom of the text.

You can define custom images for the different RadToolBarItem states:

  • ImageUrl - used when the item is in its normal state
  • DisabledImageUrl - used when the item is disabled (Enabled = false)
  • FocusedImageURL - used when the item is focused after tabbing to it with the keyboard.
  • ClickedImageURL - used when the left mouse key is pressed over the item
  • HoveredCssClass - used when the mouse cursor is over the item
  • CheckedCssClass - used when a button checked state is true (applies only to RadToolBarButton).
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="ToolBar.Examples.Appearance.Images.DefaultCS" %>

<%@ 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 href="styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        //<![CDATA[
        function onClientButtonClicking(sender, args) {
            var button = args.get_item();
            var parent = button.get_parent();
            var toolBar = button.get_toolBar();
            var alignDropDown = toolBar.get_items().getItem(5);

            if (parent == alignDropDown)
                alignDropDown.set_imageUrl(button.get_imageUrl());
            //]]>
        }
    </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 size-wide">
        <telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server" OnClientButtonClicking="onClientButtonClicking"
            EnableRoundedCorners="true" EnableShadows="true">
            <Items>
                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Appearance/Images/images/back.png"
                    Text="Back" ToolTip="Back">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Appearance/Images/images/forward.png"
                    Text="Forward" ToolTip="Forward">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Appearance/Images/images/bold.png"
                    Text="Bold" CheckOnClick="true" AllowSelfUnCheck="true" Group="Bold" ToolTip="Bold">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Appearance/Images/images/italic.png"
                    Text="Italic" CheckOnClick="true" AllowSelfUnCheck="true" Group="Italic" ToolTip="Italic">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Appearance/Images/images/underline.png"
                    Text="Underline" CheckOnClick="true" AllowSelfUnCheck="true" Group="Underline"
                    ToolTip="Underline">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarDropDown Text="Align" ImageUrl="~/ToolBar/Examples/Appearance/Images/images/align.png"
                    ToolTip="Align">
                    <Buttons>
                        <telerik:RadToolBarButton Text="Left" ImageUrl="~/ToolBar/Examples/Appearance/Images/images/left.png"
                            CheckOnClick="true" Group="Align" ToolTip="Align Left">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Center" ImageUrl="~/ToolBar/Examples/Appearance/Images/images/center.png"
                            CheckOnClick="true" Group="Align" ToolTip="Align Center">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Right" ImageUrl="~/ToolBar/Examples/Appearance/Images/images/right.png"
                            CheckOnClick="true" Group="Align" ToolTip="Align Right">
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarDropDown>
                <telerik:RadToolBarSplitButton>
                    <Buttons>
                        <telerik:RadToolBarButton Text="Red" ImageUrl="~/ToolBar/Examples/Appearance/Images/images/red.png"
                            CheckOnClick="true" Group="Color" ToolTip="Set Color Red">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Blue" ImageUrl="~/ToolBar/Examples/Appearance/Images/images/blue.png"
                            CheckOnClick="true" Group="Color" ToolTip="Set Color Blue">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Green" ImageUrl="~/ToolBar/Examples/Appearance/Images/images/green.png"
                            CheckOnClick="true" Group="Color" ToolTip="Set Color Green">
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarSplitButton>
            </Items>
        </telerik:RadToolBar>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Display Type" Size="Narrow">
                    <asp:RadioButtonList ID="rblDisplayType" runat="server"
                        AutoPostBack="true" OnSelectedIndexChanged="rblDisplayType_SelectedIndexChanged">
                        <asp:ListItem Text="Text and Image" Selected="true"></asp:ListItem>
                        <asp:ListItem Text="Text Only"></asp:ListItem>
                        <asp:ListItem Text="Image Only"></asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Image position">
                    <asp:RadioButtonList ID="rblImagePosition" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblImagePosition_SelectedIndexChanged">
                        <asp:ListItem Text="Left" Selected="true"></asp:ListItem>
                        <asp:ListItem Text="Right"></asp:ListItem>
                        <asp:ListItem Text="AboveText"></asp:ListItem>
                        <asp:ListItem Text="BelowText"></asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance