Search results

Sorting

Sorting enables you to sort data in the Ascending or Descending order. To sort a column, click the column header.

To sort multiple columns, press and hold the CTRL key and click the column header. You can clear sorting of any one of the multi-sorted columns by pressing and holding the SHIFT key and clicking the specific column header.

To enable sorting in the Grid, set the AllowSorting to true. Sorting options can be configured through the SortSettings.

razor
sorting.cs
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSorting().Columns(col =>
{

    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add();
    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).AllowPaging().PageSettings(page => page.PageCount(5)).Render()
public IActionResult Index()
        {
            var orders=OrderDetails.GetAllRecords();
            ViewBag.datasource = orders;            
            return View();
        }
  • Grid columns are sorted in the Ascending order. If you click the already sorted column, the sort direction toggles.
  • You can apply and clear sorting by invoking sortColumn and clearSorting methods.
  • To disable sorting for a particular column, set the Columns.AllowSorting to false.

Initial sort

To sort at initial rendering, set the Field and Direction in the SortSettings.Columns.

razor
initial-sort.cs
@{
        List<object> cols = new List<object>();
        cols.Add(new { field = "OrderDate", direction = "Ascending" });
        cols.Add(new { field = "Freight", direction = "Descending" });
    }
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSorting().Columns(col =>
{

    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add();
    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();

}).AllowPaging().PageSettings(page => page.PageCount(2)).SortSettings(sort => sort.Columns(cols)).Render()
public IActionResult Index()
        {
            var orders=OrderDetails.GetAllRecords();
            ViewBag.datasource = orders;            
            return View();
        }

Sorting events

During the sort action, the grid component triggers two events. The ActionBegin event triggers before the sort action starts, and the ActionComplete event triggers after the sort action is completed. Using these events you can perform the needed actions.

razor
sort-event.cs
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSorting(true).ActionComplete("sortEvent").ActionBegin("sortEvent").Columns(col =>
{

    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add();
    col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).AllowPaging().PageSettings(page => page.PageCount(5)).Render()

<script>
      function sortEvent(args){
            alert(args.requestType + ' ' + args.type); //custom Action
      }
</script>
public IActionResult Index()
        {
            if (orders.Count() == 0)
                DataSource();
            ViewBag.datasource = orders;            
            return View();
        }

        public void DataSource()
        {
            int code = 10000;
            for (int i = 1; i < 10; i++)
            {
                orders.Add(new OrderDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
                orders.Add(new OrderDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
                orders.Add(new OrderDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
                orders.Add(new OrderDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
                orders.Add(new OrderDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
                code += 5;
            }
        }

The args.requestType is the current action name. For example, in sorting the args.requestType is ‘sorting’.

Touch interaction

When you tap the grid header on touchscreen devices, the selected column header is sorted. A popup sorting is displayed for multi-column sorting. To sort multiple columns, tap the popupmsorting, and then tap the desired grid headers.

The following screenshot shows grid touch sorting.

Touch interaction