Search results

Sort the columns

SortDirection allows you to sort the columns bounded to the Query Builder to view the columns by ascending or descending order. You can set SortDirection property to sort the fields.

@using Syncfusion.EJ2.Blazor.QueryBuilder

<EjsQueryBuilder Columns="@Columns" SortDirection="SortDirection.Ascending" 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 be shown as

QueryBuilder Sample