Right-To-Left support in Syncfusion JavaScript Controls

10 May 20233 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:

index.ts
index.html
import { enableRtl } from '@syncfusion/ej2-base';
import { ListView } from '@syncfusion/ej2-lists';
import { data } from './datasource.ts';

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

let rtlListObj: ListView = new ListView({
    dataSource: data,
    headerTitle: 'کاریں',
    showHeader: true,
    height: '350px'
    });
rtlListObj.appendTo('#listview');
<!DOCTYPE html>
<html>

<head>
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='listview'></div>
    </div>
</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:

index.ts
index.html
import { ListView } from '@syncfusion/ej2-lists';
import { data } from './datasource.ts';

let rtlListObj: ListView = new ListView({
    dataSource: data,
    enableRtl: true,
    headerTitle: 'کاریں',
    showHeader: true,
    height: '350px'
});
rtlListObj.appendTo('#listview');
<!DOCTYPE html>
<html>

<head>
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='listview'></div>
    </div>
</body>

</html>