RTL provides an option to switch the text direction and layout of the Query Builder component from right-to-left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL, set the enableRtl to true.
import { L10n } from '@syncfusion/ej2-base';
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
let hardwareData: Object[] = [{
'TaskID': 1,
'Name': 'Lenovo Yoga',
'Category': 'Laptop',
'SerialNo': 'CB27932009',
'InvoiceNo': 'INV-2878',
'Status': 'Assigned'
},
{
'TaskID': 2,
'Name': 'Acer Aspire',
'Category': 'Others',
'SerialNo': 'CB35728290',
'InvoiceNo': 'INV-3456',
'Status': 'In-repair'
},
{
'TaskID': 3,
'Name': 'Apple MacBook',
'Category': 'Laptop',
'SerialNo': 'CB35628728',
'InvoiceNo': 'INV-2763',
'Status': 'In-repair'
}];
L10n.load({
'ar-AE': {
'querybuilder': {
'AddGroup': 'إضافة مجموعة',
'AddCondition': 'اضافة الشرط',
'DeleteRule': 'أزل هذا الشرط',
'DeleteGroup': 'حذف المجموعة',
'Edit': 'تصحيح',
'SelectField': 'اختر مجال',
'DeleteRule': 'أزل هذا الشرط',
'DeleteGroup': 'حذف المجموعة',
'SelectOperator': 'حدد المشغل',
'StartsWith': 'ابدا ب',
'EndsWith': 'ينتهي مع',
'Contains': 'يحتوي على',
'Equal': 'مساو',
'NotEqual': 'ليس متساوي',
'LessThan': 'أقل من',
'LessThanOrEqual': 'اصغر من او يساوي',
'GreaterThan': 'أكثر من',
'GreaterThanOrEqual': 'أكبر من أو يساوي',
'Between': 'ما بين',
'NotBetween': 'ليس بينهما',
'In': 'في',
'NotIn': 'ليس في',
'Remove': 'إزالة',
'ValidationMessage': 'هذه الخانة مطلوبه'
}
}
});
let columnData: ColumnsModel[] = [
{ field: 'TaskID', label: 'Task ID', type: 'number' },
{ field: 'Name', label: 'Name', type: 'string' },
{ field: 'Category', label: 'Category', type: 'string' },
{ field: 'SerialNo', label: 'Serial No', type: 'string' },
{ field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
{ field: 'Status', label: 'Status', type: 'string' }
];
let importRules: RuleModel = {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
}]
};
let queryBuilder: QueryBuilder = new QueryBuilder({
width: '70%',
dataSource: hardwareData,
columns: columnData,
rule: importRules,
enableRtl: true,
locale: 'ar-AE',
});
queryBuilder.appendTo('#querybuilder');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Query Builder</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-querybuilder/styles/material.css" rel="stylesheet" />
<link href="styles.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='querybuilder'></div>
<div id='property'> </div>
</div>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-query-builder {
margin: 0 auto;
}