Button - Right-to-Left Support

."This is a standard button with a right positioned built-in icon SecondaryIconCssClass="rbSave
Use the SecondaryIconCssClass property to show the icon of RadButton on the right side
".This is a link button with a right positioned built-in icon SecondaryIconCssClass="rbSave


.Radio buttons in Right-to-Left parent
The RadButton control automatically moves the icons to the right


.CheckBoxes in Right-to-Left parent
Similarly as the Radio buttons, the CheckBox icons are automatically moved to the right
The user can easily customize her/his Radios or CheckBoxes using the Icon functionality of the RadButton control. These RadButton controls have their SecondaryIconCssClass properties, set to the CSS classes for the CheckBox icon
.This demo shows how to render a CustomToggle button with embedded icons placed on the right side of the control
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadButton fully supports right-to-left (RTL) language locales. In order to switch a RadButton to RTL mode, you should set dir=rtl to its parent HTML element or use the direction:rtl CSS property. You can also do this globally for the page, e.g., on the<body>, <form> or <html> element.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />
</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">
        <div dir="rtl">
            <table cellpadding="0" cellspacing="0" width="100%" class="imgBtnTable">
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" ID="btnVolume" runat="server" ButtonType="StandardButton" Width="100px"
                            AutoPostBack="false" Text="תקן כפתור">
                            <Icon SecondaryIconCssClass="rbUpload" SecondaryIconRight="10" SecondaryIconTop="3"></Icon>
                        </telerik:RadButton>
                    </td>
                    <td>."This is a standard button with a right positioned built-in icon SecondaryIconCssClass="rbSave
                    <br />
                        Use the <strong>SecondaryIconCssClass</strong> property to show the icon of RadButton
                    on the right side
                    </td>
                </tr>
                <tr>
                    <td>
                        <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" ButtonType="LinkButton" AutoPostBack="false"
                            Text="ذخیره">
                            <Icon SecondaryIconCssClass="rbSave"></Icon>
                        </telerik:RadButton>
                    </td>
                    <td>".This is a link button with a right positioned built-in icon SecondaryIconCssClass="rbSave
                    </td>
                </tr>
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" ID="RadioButton1" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                            AutoPostBack="false" GroupName="Radio" Text="Radio Button 1">
                        </telerik:RadButton>
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="RadioButton2" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                            AutoPostBack="false" GroupName="Radio" Text="Radio Button 2" Checked="true">
                        </telerik:RadButton>
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="RadioButton3" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                            AutoPostBack="false" GroupName="Radio" Text="Radio Button 3">
                        </telerik:RadButton>
                    </td>
                    <td>.Radio buttons in Right-to-Left parent
                    <br />
                        The RadButton control automatically moves the icons to the right
                    </td>
                </tr>
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                            AutoPostBack="false" Text="CheckBox 1">
                        </telerik:RadButton>
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="RadButton3" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                            AutoPostBack="false" Text="CheckBox 2" Checked="true">
                        </telerik:RadButton>
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="RadButton4" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                            AutoPostBack="false" Text="CheckBox 3">
                        </telerik:RadButton>
                    </td>
                    <td>.CheckBoxes in Right-to-Left parent
                    <br />
                        Similarly as the Radio buttons, the CheckBox icons are automatically moved to the
                    right
                    </td>
                </tr>
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" ID="CheckBox1" runat="server" ButtonType="StandardButton" ToggleType="CheckBox"
                            Checked="true" AutoPostBack="false" BorderWidth="0" BackColor="transparent" Text="CheckBox 1">
                            <ToggleStates>
                                <telerik:RadButtonToggleState Text="Checked" SecondaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                                <telerik:RadButtonToggleState Text="UnChecked" SecondaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                            </ToggleStates>
                        </telerik:RadButton>
                        <div style="padding-bottom: 5px;">
                        </div>
                        <telerik:RadButton RenderMode="Lightweight" ID="CheckBox" runat="server" ButtonType="StandardButton" ToggleType="CheckBox"
                            AutoPostBack="false" BorderWidth="0" BackColor="transparent" Text="CheckBox 2">
                            <ToggleStates>
                                <telerik:RadButtonToggleState Text="Checked" SecondaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                                <telerik:RadButtonToggleState Text="UnChecked" SecondaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                            </ToggleStates>
                        </telerik:RadButton>
                        <div style="padding-bottom: 5px;">
                        </div>
                        <telerik:RadButton RenderMode="Lightweight" ID="CheckBox3" runat="server" ButtonType="StandardButton" ToggleType="CheckBox"
                            Checked="true" AutoPostBack="false" BorderWidth="0" BackColor="transparent" Text="CheckBox 3">
                            <ToggleStates>
                                <telerik:RadButtonToggleState Text="Checked" SecondaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                                <telerik:RadButtonToggleState Text="UnChecked" SecondaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                            </ToggleStates>
                        </telerik:RadButton>
                    </td>
                    <td>The user can easily customize her/his Radios or CheckBoxes using the Icon functionality
                    of the RadButton control. These RadButton controls have their SecondaryIconCssClass
                    properties, set to the CSS classes for the CheckBox icon
                    </td>
                </tr>
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" ID="BuiltinIconsButton2" runat="server" ButtonType="StandardButton"
                            ToggleType="CustomToggle" AutoPostBack="false">
                            <ToggleStates>
                                <telerik:RadButtonToggleState SecondaryIconCssClass="rbOk" Text="موافق"></telerik:RadButtonToggleState>
                                <telerik:RadButtonToggleState SecondaryIconCssClass="rbCancel" Text="إلغاء"></telerik:RadButtonToggleState>
                            </ToggleStates>
                        </telerik:RadButton>
                    </td>
                    <td>.This demo shows how to render a CustomToggle button with embedded icons placed
                    on the right side of the control
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?