Sorting in ASP.NET MVC MultiColumn Combobox control

13 Jun 202412 minutes to read

The MultiColumn ComboBox control provides built-in support for sorting data-bound columns in ascending or descending order by using the AllowSorting property. By default, the value is true.

To sort a particular column in the MultiColumn ComboBox, click on the grid column header in the popup. Each click on the header toggles the sorting order of the column between Ascending and Descending.

Setting the sort order

You can use the SortOrder property to set the order of the column. It supports three types of sorting None, Ascending and Descending.

When you click on a column header for the first time, it sorts the column in ascending order. Clicking the same column header again will sort the column in descending order. A repetitive third click on the same column header will clear the sorting.

In the following examples, data sorting is done with Descending order.

CSHTML

@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
    @Html.EJS().MultiColumnComboBox("sort-order").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
    { Text = "Name", Value = "EmpID" }).Columns(col =>
    {
        col.Field("EmpID").Header("Employee ID").Width("90").Add();
        col.Field("Name").Header("Name").Width("90").Add();
        col.Field("Designation").Header("Designation").Width("90").Add();
        col.Field("Country").Header("Country").Width("70").Add();
    }).AllowSorting(true).SortOrder(SortOrder.Descending).Render()
</div>

Sorting.cs

public ActionResult Demo()
{
    var employees = new List<Employee>
    {
        new Employee { EmpID = 1001, Name = "Andrew Fuller", Designation = "Team Lead", Country = "England" },
        new Employee { EmpID = 1002, Name = "Robert", Designation = "Developer", Country = "USA" },
        new Employee { EmpID = 1003, Name = "Michael", Designation = "HR", Country = "Russia" },
        new Employee { EmpID = 1004, Name = "Steven Buchanan", Designation = "Product Manager", Country = "Ukraine" },
        new Employee { EmpID = 1005, Name = "Margaret Peacock", Designation = "Developer", Country = "Egypt" },
        new Employee { EmpID = 1006, Name = "Janet Leverling", Designation = "Team Lead", Country = "Africa" },
        new Employee { EmpID = 1007, Name = "Alice", Designation = "Product Manager", Country = "Australia" },
        new Employee { EmpID = 1008, Name = "Bob", Designation = "Developer", Country = "India" },
        new Employee { EmpID = 1009, Name = "John", Designation = "Product Manager", Country = "Ireland" },
        new Employee { EmpID = 1010, Name = "Mario Pontes", Designation = "Team Lead", Country = "South Africa" },
        new Employee { EmpID = 1011, Name = "Yang Wang", Designation = "Developer", Country = "Russia" },
        new Employee { EmpID = 1012, Name = "David", Designation = "Product Manager", Country = "Egypt" },
        new Employee { EmpID = 1013, Name = "Antonio Bianchi", Designation = "Team Lead", Country = "USA" },
        new Employee { EmpID = 1014, Name = "Laura", Designation = "Developer", Country = "England" },
        new Employee { EmpID = 1015, Name = "Carlos Hernandez", Designation = "Developer", Country = "Canada" },
        new Employee { EmpID = 1016, Name = "Lily", Designation = "Product Manager", Country = "France" },
        new Employee { EmpID = 1017, Name = "Tom Williams", Designation = "Developer", Country = "Ukraine" },
        new Employee { EmpID = 1018, Name = "Grace", Designation = "Developer", Country = "Australia" },
        new Employee { EmpID = 1019, Name = "Olivia", Designation = "Team Lead", Country = "Ireland" },
        new Employee { EmpID = 1020, Name = "James", Designation = "Developer", Country = "China" }
    };

    ViewBag.EmpData = employees;
    return View(ViewBag.EmpData);
}

public class Employee
{
	public int EmpID { get; set; }
	public string Name { get; set; }
	public string Designation { get; set; }
	public string Country { get; set; }
}

Sort type

You can use the SortType property to set the type of sorting applied to the columns. It supports tow types OneColumn and MultipleColumns. By default the SortType is oneColumn.

To sort multiple columns press and hold the CTRL key and click on the column headers. This feature is useful when you want to sort your data based on multiple criteria to analyze it in various ways.

In the following examples, data sorting type is set with MultipleColumns.

CSHTML

@using Syncfusion.EJ2.MultiColumnComboBox;

<div id="container" style="width: 500px">
    @Html.EJS().MultiColumnComboBox("sort-type").DataSource((IEnumerable<object>)Model).Fields(new MultiColumnComboBoxFieldSettings
    { Text = "Name", Value = "EmpID" }).Columns(col =>
    {
        col.Field("EmpID").Header("Employee ID").Width("90").Add();
        col.Field("Name").Header("Name").Width("90").Add();
        col.Field("Designation").Header("Designation").Width("90").Add();
        col.Field("Country").Header("Country").Width("70").Add();
    }).AllowSorting(true).SortOrder(SortOrder.Descending).SortType(SortType.MultipleColumns).Render()
</div>

SortType.cs

public ActionResult Demo()
{
    var employees = new List<Employee>
    {
        new Employee { EmpID = 1001, Name = "Andrew Fuller", Designation = "Team Lead", Country = "England" },
        new Employee { EmpID = 1002, Name = "Robert", Designation = "Developer", Country = "USA" },
        new Employee { EmpID = 1003, Name = "Michael", Designation = "HR", Country = "Russia" },
        new Employee { EmpID = 1004, Name = "Steven Buchanan", Designation = "Product Manager", Country = "Ukraine" },
        new Employee { EmpID = 1005, Name = "Margaret Peacock", Designation = "Developer", Country = "Egypt" },
        new Employee { EmpID = 1006, Name = "Janet Leverling", Designation = "Team Lead", Country = "Africa" },
        new Employee { EmpID = 1007, Name = "Alice", Designation = "Product Manager", Country = "Australia" },
        new Employee { EmpID = 1008, Name = "Bob", Designation = "Developer", Country = "India" },
        new Employee { EmpID = 1009, Name = "John", Designation = "Product Manager", Country = "Ireland" },
        new Employee { EmpID = 1010, Name = "Mario Pontes", Designation = "Team Lead", Country = "South Africa" },
        new Employee { EmpID = 1011, Name = "Yang Wang", Designation = "Developer", Country = "Russia" },
        new Employee { EmpID = 1012, Name = "David", Designation = "Product Manager", Country = "Egypt" },
        new Employee { EmpID = 1013, Name = "Antonio Bianchi", Designation = "Team Lead", Country = "USA" },
        new Employee { EmpID = 1014, Name = "Laura", Designation = "Developer", Country = "England" },
        new Employee { EmpID = 1015, Name = "Carlos Hernandez", Designation = "Developer", Country = "Canada" },
        new Employee { EmpID = 1016, Name = "Lily", Designation = "Product Manager", Country = "France" },
        new Employee { EmpID = 1017, Name = "Tom Williams", Designation = "Developer", Country = "Ukraine" },
        new Employee { EmpID = 1018, Name = "Grace", Designation = "Developer", Country = "Australia" },
        new Employee { EmpID = 1019, Name = "Olivia", Designation = "Team Lead", Country = "Ireland" },
        new Employee { EmpID = 1020, Name = "James", Designation = "Developer", Country = "China" }
    };

    ViewBag.EmpData = employees;
    return View(ViewBag.EmpData);
}

public class Employee
{
	public int EmpID { get; set; }
	public string Name { get; set; }
	public string Designation { get; set; }
	public string Country { get; set; }
}