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

Orientation

  • Left
  • Center
  • Right
  • Justify
  • Text style
    • Bold
    • Italic
    • Underline
  • Orientation

RadToolBar can be horizontally or vertically aligned. You can use its Orientation property to align the toolbar the way you want.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ToolBar.Examples.Functionality.Orientation.DefaultCS"Language="c#"  %>

<%@ 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" />
</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-narrow">
        <telerik:RadToolBar RenderMode="Lightweight" runat="server" ID="RadToolBar1" EnableRoundedCorners="true" EnableShadows="true">
            <Items>
                <telerik:RadToolBarButton Text="Left" CheckOnClick="true" Checked="true" Group="Align">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Center" CheckOnClick="true" Group="Align">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Right" CheckOnClick="true" Group="Align">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Justify" CheckOnClick="true" Group="Align">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarDropDown Text="Text style">
                    <Buttons>
                        <telerik:RadToolBarButton Text="Bold" CheckOnClick="true" AllowSelfUnCheck="true"
                            Group="Bold">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Italic" CheckOnClick="true" AllowSelfUnCheck="true"
                            Group="Italic">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Underline" CheckOnClick="true" AllowSelfUnCheck="true"
                            Group="Underline">
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarDropDown>
            </Items>
        </telerik:RadToolBar>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Orientation" Orientation="Vertical" Expanded="true">
        <Views>
            <qsf:View>
                <asp:RadioButtonList runat="server" ID="OrientationOptions" OnSelectedIndexChanged="OrientationOptions_SelectedIndexChanged"
                    AutoPostBack="true" Style="margin-left: 20px;">
                    <asp:ListItem Text="Horizontal" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="Vertical"></asp:ListItem>
                </asp:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance