Right to left (RTL)

17 Feb 20224 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

@Html.EJS().QueryBuilder("querybuilder").Width("72%").Columns(col =>
   {
       col.Field("EmployeeID").Label("Employee ID").Type("number").Add();
       col.Field("FirstName").Label("First Name").Type("string").Add();
       col.Field("TitleOfCourtesy").Label("Title Of Courtesy").Type("boolean").Values(new List<string> { "Mr.", "Mrs." }).Add();
       col.Field("Title").Label("Title").Type("string").Add();
       col.Field("HireDate").Label("Hire Date").Type("date").Format("dd/MM/yyyy").Add();
       col.Field("Country").Label("Country").Type("string").Add();
       col.Field("City").Label("City").Type("string").Add();
   }).Rule(ViewBag.rule).EnableRtl(true).Locale("ar-AE").Render()

    <script type="text/javascript">
    var qbObj = document.getElementById('querybuilder1').ej2_instances[0];
    ej.base.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': 'هذه الخانة مطلوبه'
        }
    }
    });
</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();
}