Sorting in Blazor DataGrid Component
29 Nov 202424 minutes to read
The DataGrid component provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting in the Datagrid, set the AllowSorting property to true.
To know about how to Sorting in Blazor DataGrid Component, you can check this video.
To sort a particular column in the DataGrid, click on its column header. Each time you click the header, the order of the column will switch between Ascending and Descending.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowSorting="true" Height="315">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}
- DataGrid columns are sorted in the Ascending order. If you click the already sorted column, then toggles the sort direction..
- You can apply and clear sorting by using the SortColumnAsync and ClearSortingAsync methods.
- To disable sorting for a particular column, set the
AllowSortingproperty of GridColumn to false.
Initial sorting
By default, the grid component does not apply any sorting to its records at initial rendering. However, you can apply initial sorting by setting the Field and Direction in Columns property of the GridSortSettings component. This feature is helpful when you want to display your data in a specific order when the grid is first loaded.
The following example demonstrates how to set the GridSortSettings component of the Columns for OrderID and ShipCity columns with a specified Direction.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowSorting="true" Height="315">
<GridSortSettings>
<GridSortColumns>
<GridSortColumn Field="OrderID" Direction="SortDirection.Ascending"></GridSortColumn>
<GridSortColumn Field="ShipCity" Direction="SortDirection.Descending"></GridSortColumn>
</GridSortColumns>
</GridSortSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}The initial sorting defined in the
GridSortSettingscomponent of theColumnswill override any sorting applied through user interaction.
Multi-column sorting
The DataGrid component allows to sort more than one column at a time using multi-column sorting. To enable multi-column sorting in the grid, set the AllowSorting property to true, and set the AllowMultiSorting property to true which enable the user to sort multiple columns by holding 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.
To clear multi-column sorting for a particular column, press the “Shift + mouse left click”.
- The
AllowSortingmust be true while enabling multi-column sort.- Set
AllowMultiSortingproperty as false to disable multi-column sorting.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowSorting="true" AllowMultiSorting="true" Height="315">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Prevent sorting for particular column
The DataGrid component provides the ability to prevent sorting for a particular column. This can be useful when you have certain columns that you do not want to be included in the sorting process.
It can be achieved by setting the AllowSorting property of the particular column to false.
The following example demonstrates, how to disable sorting for CustomerID column.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowSorting="true" Height="315">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" AllowSorting="false" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Customizing Sorting Functionality with the AllowUnsort Property
When the AllowUnsort property is set to false in GridSortSettings component, the grid cannot be placed in an unsorted state by clicking on a sorted column header. This setting restricts the action of reverting the grid to its original unsorted layout through column header clicks.
In the following example, this is demonstrated by preventing the grid from entering an unsorted state by setting AllowUnsort to false in GridSortSettings component.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowSorting="true" Height="267px">
<GridSortSettings AllowUnsort="false"></GridSortSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Sort order
By default, the sorting order will be as Ascending -> Descending -> None.
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.
Custom sorting
The DataGrid component provides a way to customize the default sort action for a column by defining the SortComparer property of GridColumn Directive.The SortComparer data type was the IComparer interface, so the custom sort comparer class should be implemented in the interface IComparer.
The following example demonstrates how to define custom sort comparer function for the CustomerID column.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowSorting="true" Height="315">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" SortComparer="new CustomComparer()" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" Width="80"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
public class CustomComparer : IComparer<Object>
{
public int Compare(object XRowDataToCompare, object YRowDataToCompare)
{
OrderData XRowData = XRowDataToCompare as OrderData;
OrderData YRowData = YRowDataToCompare as OrderData;
int XRowDataOrderID = (int)XRowData.OrderID;
int YRowDataOrderID = (int)YRowData.OrderID;
if (XRowDataOrderID < YRowDataOrderID)
{
return -1;
}
else if (XRowDataOrderID > YRowDataOrderID)
{
return 1;
}
else
{
return 0;
}
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID, string CustomerID, double? Freight, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.Freight = Freight;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipName { get; set; }
public double? Freight { get; set; }
}
- The SortComparer function takes two parameters: a and b. The a and b parameters are the values to be compared. The function returns -1, 0, or 1, depending on the comparison result.
- The SortComparer property will work only for local data.
- When using the column template to display data in a column, you will need to use the Field property of GridColumn to work with the SortComparer property.
Touch interaction
When you tap the datagrid header on touchscreen devices, the selected column header is sorted. A popup 
is displayed for multi-column sorting. To sort multiple columns, tap the popup
, and then tap the desired datagrid headers.
The AllowMultiSorting and AllowSorting should be true then only the popup will be shown.
The following screenshot represents a grid touch sorting in the device.
Sort foreign key column based on text
To perform sorting based on foreign key column, the GridForeignColumn column can be enabled by using ForeignDataSource , ForeignKeyField and ForeignKeyValue properties.
Sort foreign key column based on text for local data
In the case of local data in the grid, the sorting operation will be performed based on the ForeignKeyValue property of the column. The ForeignKeyValue property should be defined in the column definition with the corresponding foreign key value for each row. The grid will sort the foreign key column based on the text representation of the ForeignKeyValue property.
The following example demonstrates how to perform sorting by enabling a foreign key column, where the CustomerID column acts as a foreign column displaying the ContactName column from foreign data.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" Height="315" AllowSorting="true">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="90"></GridColumn>
<GridForeignColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" ForeignKeyValue="ContactName" ForeignKeyField="CustomerID" ForeignDataSource="@customerData" Width="100"></GridForeignColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
public List<EmployeeData> customerData { get; set; }
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
customerData = EmployeeData.GetAllRecords();
}
}public class EmployeeData
{
public static List<EmployeeData> customerData = new List<EmployeeData>();
public EmployeeData()
{
}
public EmployeeData(int? customerID, string contactName)
{
CustomerID = customerID;
ContactName = contactName;
}
public static List<EmployeeData> GetAllRecords()
{
if (customerData.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
customerData.Add(new EmployeeData(1, "Paul Henriot"));
customerData.Add(new EmployeeData(2, "Karin Josephs"));
customerData.Add(new EmployeeData(3, "Mario Pontes"));
customerData.Add(new EmployeeData(4, "Mary Saveley"));
customerData.Add(new EmployeeData(5, "Pascale Cartrain"));
customerData.Add(new EmployeeData(6, "Mario Pontes"));
customerData.Add(new EmployeeData(7, "Yang Wang"));
customerData.Add(new EmployeeData(8, "Michael Holz"));
customerData.Add(new EmployeeData(9, "Paula Parente"));
code += 5;
}
}
return customerData;
}
public int? CustomerID { get; set; }
public string ContactName { get; set; }
}
public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,int? CustomerID,string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, 1, "Reims", "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, 2, "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, 3, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, 4, "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, 5, "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, 6, "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, 7, "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, 8, "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, 9, "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public int? CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}How to customize sort icon
To customize the sort icon in the DataGrid, you can override the default grid classes .e-icon-ascending and .e-icon-descending with custom content using CSS. Simply specify the desired icons or symbols using the content property as mentioned below
.e-grid .e-icon-ascending::before {
content: '\e87a';
}
.e-grid .e-icon-descending::before {
content: '\e70d';
}In the below sample, DataGrid is rendered with a customized sort icon.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@GridData" AllowSorting="true" Height="315">
<GridSortSettings>
<GridSortColumns>
<GridSortColumn Field="ShipCity" Direction="SortDirection.Ascending"></GridSortColumn>
<GridSortColumn Field="CustomerID" Direction="SortDirection.Descending"></GridSortColumn>
</GridSortColumns>
</GridSortSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
<style>
.e-grid .e-icon-ascending::before {
content: '\e87a'; /* Unicode character representing the ascending icon */
}
.e-grid .e-icon-descending::before {
content: '\e70d '; /* Unicode character representing the descending icon */
}
</style>
@code {
public List<OrderData> GridData { get; set; }
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Sort columns externally
The DataGrid component in Syncfusion’s Blazor suite allows you to customize the sorting of columns and provides flexibility in sorting based on external interactions. You can sort columns and clear sorting using an external button click.
Add sort columns
To sort a column externally, you can utilize the SortColumnAsync method with parameters ColumnName, Direction and IsMultiSort provided by the DataGrid component. This method allows you to programmatically sort a specific column based on your requirements.
The following example demonstrates how to add sort columns to a grid. It utilizes the DropDownList component to select the column and sort direction. When an external button is clicked, the SortColumnAsync method is called with the specified ColumnName, Direction, and IsMultiSort parameters.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
<div style="display:flex;">
<label style="padding: 10px 20px 0 0"> Column name :</label>
<SfDropDownList TValue="string" TItem="Columns" Width="300px" Placeholder="Select a Column" DataSource="@LocalData" @bind-Value="@DropDownValue">
<DropDownListFieldSettings Value="ID" Text="Value"></DropDownListFieldSettings>
</SfDropDownList>
</div>
<br />
<div style="display:flex;">
<label style="padding: 10px 17px 0 0"> Sorting direction :</label>
<SfDropDownList TValue="Syncfusion.Blazor.Grids.SortDirection" TItem="string" DataSource="@EnumValues" @bind-Value="@DropDownDirection" Width="300px">
</SfDropDownList>
</div>
<br />
<div style="display:flex;">
<Syncfusion.Blazor.Buttons.SfButton OnClick="AddsortColumn">ADD SORT COLUMN</Syncfusion.Blazor.Buttons.SfButton>
</div>
<SfGrid DataSource="@GridData" @ref="Grid" AllowSorting="true" Height="315">
<GridSortSettings>
<GridSortColumns>
<GridSortColumn Field="ShipName" Direction="SortDirection.Ascending"></GridSortColumn>
</GridSortColumns>
</GridSortSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="80"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
public SfGrid<OrderData>? Grid { get; set; }
public string DropDownValue { get; set; } = "OrderID";
public string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection));
public Syncfusion.Blazor.Grids.SortDirection DropDownDirection { get; set; } = SortDirection.Ascending;
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
List<Columns> LocalData = new List<Columns>
{
new Columns() { ID= "OrderID", Value= "OrderID" },
new Columns() { ID= "CustomerID", Value= "CustomerID" },
new Columns() { ID= "Freight", Value= "Freight" },
};
List<Direction> LocalData1 = new List<Direction>
{
new Direction() { ID= "Ascending", Value= "Ascending" },
new Direction() { ID= "Descending", Value= "Descending" },
};
public class Columns
{
public string ID { get; set; }
public string Value { get; set; }
}
public class Direction
{
public string ID { get; set; }
public string Value { get; set; }
}
public async Task AddsortColumn()
{
await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true);
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID, double? Freight, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.Freight = Freight;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipName { get; set; }
public double? Freight { get; set; }
}Remove sort columns
To remove a sort column externally, you can use the ClearSortingAsync method provided by the Grid component. This method allows you to remove the sorting applied to a specific column.
The following example demonstrates how to remove sort columns. It utilizes the DropDownList component to select the column. When an external button is clicked, the ClearSortingAsync method is called to remove the selected sort column.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
<div style="display:flex;">
<label style="padding: 10px 20px 0 0"> Column name :</label>
<SfDropDownList TValue="string" TItem="Columns" Width="125px" Placeholder="Select a Column" DataSource="@LocalData" @bind-Value="@DropDownValue">
<DropDownListFieldSettings Value="ID" Text="Value"></DropDownListFieldSettings>
</SfDropDownList>
</div>
<br />
<div style="display:flex;">
<Syncfusion.Blazor.Buttons.SfButton OnClick="RemoveSortColumn">REMOVE SORT COLUMN</Syncfusion.Blazor.Buttons.SfButton>
</div>
<SfGrid @ref="Grid" DataSource="@GridData" AllowSorting="true" Height="315">
<GridSortSettings>
<GridSortColumns>
<GridSortColumn Field="CustomerID" Direction="SortDirection.Ascending"></GridSortColumn>
<GridSortColumn Field="ShipName" Direction="SortDirection.Descending"></GridSortColumn>
</GridSortColumns>
</GridSortSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
public SfGrid<OrderData>? Grid { get; set; }
public string DropDownValue { get; set; } = "OrderID";
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
List<Columns> LocalData = new List<Columns>
{
new Columns() { ID= "OrderID", Value= "OrderID" },
new Columns() { ID= "CustomerID", Value= "CustomerID" },
new Columns() { ID= "ShipCity", Value= "ShipCity" },
new Columns() { ID= "ShipName", Value= "ShipName" },
};
public class Columns
{
public string ID { get; set; }
public string Value { get; set; }
}
public class Direction
{
public string ID { get; set; }
public string Value { get; set; }
}
List<string> listItems = new List<string>();
public async Task RemoveSortColumn()
{
listItems.Add(DropDownValue);
await Grid.ClearSortingAsync(listItems);
listItems.Clear();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Clear sorting
To clear the sorting on an external button click, you can use the ClearSortingAsync method provided by the DataGrid component. This method clears the sorting applied to all columns in the grid.
The following example demonstrates how to clear the sorting using ClearSortingAsync method in the external button click.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
<div>
<SfButton OnClick="onExternalSort">Clear Sorting</SfButton>
</div>
<SfGrid DataSource="@GridData" @ref="Grid" AllowSorting="true" Height="315">
<GridSortSettings>
<GridSortColumns>
<GridSortColumn Field="CustomerID" Direction="SortDirection.Ascending"></GridSortColumn>
<GridSortColumn Field="ShipName" Direction="SortDirection.Descending"></GridSortColumn>
</GridSortColumns>
</GridSortSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
public SfGrid<OrderData>? Grid { get; set; }
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
private async Task onExternalSort()
{
await Grid.ClearSortingAsync();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Sorting events
The DataGrid component provides two events that are triggered during the sorting action such as Sorting and Sorted. These events can be used to perform any custom actions before and after the sorting action is completed.
-
Sorting:
Sortingevent is triggered before the sorting action begins. It provides a way to perform any necessary operations before the sorting action takes place. This event provides a parameter that contains the current sorting column name, direction, and action. -
Sorted:
Sortedevent is triggered after the sorting action is completed. It provides a way to perform any necessary operations after the sorting action has taken place. This event provides a parameter that contains the current sorting column name, direction, and action.
The following example demonstrates how the Sorting and Sorted events work when Sorting is performed. The Sorting event event is used to cancel the sorting of the OrderID column. The Sorted event is used to display a message
@using Syncfusion.Blazor.Grids
@if (show == true)
{
<div style="text-align : center; color: red">
<span> Sort action completed for @columnName column</span>
</div>
<br />
}
<SfGrid DataSource="@GridData" AllowSorting="true" Height="315px">
<GridEvents Sorting="SortingHandler" Sorted="SortedHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> GridData { get; set; }
public string columnName { get; set; }
public bool show { get; set; } = false;
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
public async Task SortingHandler(SortingEventArgs args)
{
if (args.ColumnName == "OrderID")
{
args.Cancel = true;
}
}
public async Task SortedHandler(SortedEventArgs args)
{
columnName = args.ColumnName;
show = true;
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}You can refer to our Blazor DataGrid feature tour page for its groundbreaking feature representations. You can also explore our Blazor DataGrid example to understand how to present and manipulate data.