Right to left (RTL)

17 Feb 20225 minutes to read

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.

CSHTML

<ejs-querybuilder id="querybuilder" width="73%" rule="ViewBag.rule" enableRtl="true" locale="ar-AE">
    <e-querybuilder-columns>
        <e-querybuilder-column field="EmployeeID" label="Employee ID" type="number"></e-querybuilder-column>
        <e-querybuilder-column field="FirstName" label="First Name" type="string"></e-querybuilder-column>
        <e-querybuilder-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" values="ViewBag.values"></e-querybuilder-column>
        <e-querybuilder-column field="Title" label="Title" type="string"></e-querybuilder-column>
        <e-querybuilder-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-querybuilder-column>
        <e-querybuilder-column field="Country" label="Country" type="string"></e-querybuilder-column>
        <e-querybuilder-column field="City" label="City" type="string"></e-querybuilder-column>
    </e-querybuilder-columns>
</ejs-querybuilder>
<script type="text/javascript">
    ej.base.L10n.load({
        'ar-AE': {
            'querybuilder': {
                'AddGroup': 'إضافة مجموعة',
                'AddCondition': 'اضافة الشرط',
                'DeleteRule': 'أزل هذا الشرط',
                'DeleteGroup': 'حذف المجموعة',
                'Edit': 'تصحيح',
                'SelectField': 'اختر مجال',
                'SelectOperator': 'حدد المشغل',
                'StartsWith': 'ابدا ب',
                'EndsWith': 'ينتهي مع',
                'Contains': 'يحتوي على',
                'Equal': 'مساو',
                'NotEqual': 'ليس متساوي',
                'LessThan': 'أقل من',
                'LessThanOrEqual': 'اصغر من او يساوي',
                'GreaterThan': 'أكثر من',
                'GreaterThanOrEqual': 'أكبر من أو يساوي',
                'Between': 'ما بين',
                'NotBetween': 'ليس بينهما',
                'In': 'في',
                'NotIn': 'ليس في',
                'Remove': 'إزالة',
                'ValidationMessage': 'هذه الخانة مطلوبه'
            }
        }
    });
</script>

Default.cs

public ActionResult Index()
{
    QueryBuilderRule rule = new QueryBuilderRule()
    {
        Condition = "and",
        Rules = new List<QueryBuilderRule>()
        {
            new QueryBuilderRule { Label="Employee ID", Field="EmployeeID", Type="number", Operator="equal", Value = 1 },
            new QueryBuilderRule { Label="Title", Field="Title", Type="string", Operator="equal", Value = "Sales Manager" }
        }
    };
    ViewBag.rule = rule;
    return View();
}