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

Right-To-Left Support

Sliding pane 1
The sliding direction is changed and the content in the second pane also inherits the rtl direction

The RadSplitter fully supports right-to-left (RTL) language locales. In order to turn on the RTL support you should set a css class for the sliding panes that forces the text-align property of the content to right in order to override the default setting from the table cell. You also need to plece the RadSplitter in a container with dir=rtl or the direction:rtl css property.

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

<!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" />
</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 class="rtlWrapper">
            <telerik:RadSplitter RenderMode="Lightweight" runat="server" ID="RadSplitter1">
                <telerik:RadPane runat="server" ID="RadPane1">
                    <telerik:RadSlidingZone Width="22px" ID="RadSlidingZone1" runat="server">
                        <telerik:RadSlidingPane runat="server" ID="RadSlidingPane1" Title="Sliding pane 1"
                            CssClass="rtlClass">
                            The content from the Sliding pane takes the new direction
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
                <telerik:RadPane runat="server" ID="RadPane2">
                    The sliding direction is changed and the content in the second pane also inherits
                the rtl direction
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance