Search results

Right to left (RTL)

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.

@using Syncfusion.EJ2.Blazor.QueryBuilder

<EjsQueryBuilder Columns="@Columns" EnableRtl="true" DataSource="@EmployeeDetails"></EjsQueryBuilder>

@code {
    public List<QueryBuilderColumn> Columns = new List<QueryBuilderColumn>
        {
            new QueryBuilderColumn{ Field = "EmployeeID", Label = "Employee ID", Type = "number" },
            new QueryBuilderColumn{ Field = "FirstName", Label = "First Name", Type = "string" },
            new QueryBuilderColumn{ Field = "TitleOfCourtesy", Label ="Title of Courtesy", Type = "boolean"},
            new QueryBuilderColumn{ Field = "Title", Label = "Title", Type = "boolean", Values = new List<string>{ "Mr.", "Mrs." } },
            new QueryBuilderColumn{ Field = "HireDate", Label = "Hire Date", Type = "date", Format = "dd/MM/yyyy"},
            new QueryBuilderColumn{ Field = "Country", Label = "Country", Type="string"},
            new QueryBuilderColumn{ Field = "City", Label = "City", Type = "string"}
        };
    public List<Employee> EmployeeDetails = new List<Employee>
        {
        new Employee{ FirstName = "Martin", EmployeeID = "1001", Country = "England", City = "Manchester", HireDate = "23/04/2014" },
        new Employee{ FirstName = "Benjamin", EmployeeID = "1002", Country = "England", City = "Birmingham", HireDate = "19/06/2014" },
        new Employee{ FirstName = "Stuart", EmployeeID = "1003", Country = "England", City = "London", HireDate = "04/07/2014"},
        new Employee{ FirstName = "Ben", EmployeeID = "1004", Country = "USA", City = "California", HireDate = "15/08/2014" },
        new Employee{ FirstName = "Joseph", EmployeeID = "1005", Country = "Spain", City = "Madrid", HireDate = "29/08/2014" }
    };

    public class Employee {
        public string FirstName { get; set; }
        public string EmployeeID { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
        public string HireDate { get; set; }
    }
}

Output will shown as

QueryBuilder Sample