Search results

Right-To-Left

09 Jun 2021 / 1 minute to read

Right To Left (RTL) can be enabled for Syncfusion JavaScript UI controls by calling enableRtl with true. This will render all the Syncfusion JavaScript controls in right to left direction. Find the code snippet for this below.

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/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 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.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/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>