JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Right-To-Left support in Syncfusion JavaScript controls

08 May 2023 / 2 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 (ES5) controls support for right-to-left (RTL) by setting the enableRtl property to true. This adds the class name e-rtl to the control element and renders all Syncfusion JavaScript controls in a right-to-left direction.

Enable RTL for all controls

To enable Right-To-Left (RTL) support for all controls, users can set the enableRtl property directly in their application. Here is an example code snippet using the ListView control:

Source
Preview
index.js
index.html
Copied to clipboard
// 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');
Copied to clipboard
<!DOCTYPE html><html><head>
            
    <link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.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 Right-To-Left (RTL) support for an individual control, users can set the enableRtl property in the control’s options. Here is an example code snippet using the ListView control:

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