Right-To-Left

23 Jan 2023 / 1 minute to read

Right To Left (RTL) can be enabled to the Syncfusion JavaScript (ES5) controls by setting the property enableRtl as true. This option will render all the Syncfusion web controls in right to left direction. Find the code snippet for this below.

Source

Preview

index.js

index.html

// 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>
            
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-lists/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.38/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 to individual control

To enable the RTL to an individual control, set the enableRtl property directly in its model options. For illustration, the enableRtl is added to the ListView control in following code snippet.

Source

Preview

index.js

index.html

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/20.4.38/ej2-lists/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.38/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>