HelpBot Assistant

How can I help you?

Right-To-Left support in Syncfusion® JavaScript Controls

6 Feb 20263 minutes to read

Right-to-Left (RTL) support allows applications to effectively communicate with users who use languages that are written from right to left, such as Arabic, Hebrew, etc.

Syncfusion® JavaScript controls support RTL by setting the enableRtl property to true. This adds the e-rtl CSS class to the control’s root element and adjusts layout, alignment, and direction for supported controls.

Enable RTL for all controls

To enable RTL globally for all controls, set the enableRtl property in the application. The example below demonstrates enabling RTL using the ListView control.

// Enables Right to left alignment for all controls
ej.base.enableRtl(true);

var rtlListObj = new ej.lists.ListView({
    dataSource: data,
    headerTitle: 'کاریں',
    showHeader: true,
    height: '350px'
    });
rtlListObj.appendTo('#listview');
<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="listview"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Enable RTL for an individual control

To enable RTL for a single control, set the enableRtl property in that control’s options. The following example shows how to enable RTL for a ListView instance.

var rtlListObj = new ej.lists.ListView({
    dataSource: data,
    enableRtl: true,
    headerTitle: 'کاریں',
    showHeader: true,
    height: '350px'
    });
rtlListObj.appendTo('#listview');
<!DOCTYPE html><html><head>
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="listview"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>