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.
@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>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();
}