JavaScript
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.ts
index.html
Copied to clipboard
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');
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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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:

Source
Preview
index.ts
index.html
Copied to clipboard
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');
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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

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

</html>
Previous
Next