Splitter - Right-To-Left Support

Sliding pane 1
The sliding direction is changed and the content in the second pane also inherits the rtl direction
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 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" />
    <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"
                            The content from the Sliding pane takes the new direction
                <telerik:RadPane runat="server" ID="RadPane2">
                    The sliding direction is changed and the content in the second pane also inherits
                the rtl direction

Find Assistance

Help Us Improve

Was this example helpful?