Single Column Sorting in Blazor Grid
IntegralUI Grid component for Blazor .NET comes with built-in support for sorting the grid data by each column according to the column's sorting order. In this document, you will learn how to enable grid sorting and sort the grid data by clicking on column's header.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As the example shows, there is a sort button in column header that when clicked, will sort the grid data according to selected sorting order: ascending or descending. The button icon has three states:
- Two arrows - states that sorting is not active
- Up arrow - states that column has ascending order set
- Down arrow - states that column has descending order set
By clicking on this button you can change the sorting order for specific column during run-time, and sort the grid data accordingly.
In addition, the ColumnClick event is handled so that whenever column header is clicked, the grid will sort the data. The sorting in this case is set manually in code, by changing the sort order with each click.
How to Enable Grid Sorting
By default, sorting is enabled for each column in Blazor Grid. You can change this by setting the AllowSort property to true or false for specific column, which by default is set to true.
Sort Grid by Column Initially
During initialization, you can sort the grid data by specific column like this:
- Setting to column's sort order to ascending or descending
- Call the Sort method and specify the column and sorting order
- (optional) Mark column as selected
You can add this code after first render of the Grid component within the OnAfterRenderAsync method. You can find the column to by using the Field property value and sort the grid data accordingly. For example, initially apply sorting by "Country" in ascending order:
How to Sort Grid Data in Different Columns
You can sort grid data by single or multiple columns. In case of single column sorting, you need to set the SortMode property value set to IntegralUISortMode.Single, which is enabled by default. Whenever column Sorting value is specified the sort button will appear in its header.
Sorting functionality is already built-in for the following data types: Boolean, Numeric, DateTime and String. However, if you need to sort the grid data by custom object type, you can create your own custom sorting operation by providing a SortComparer action method.
Sort By Click on Column Header
To enable sorting whenever column header is clicked, you need to handle the ColumnClick event where you can specify the sorting order and call the Sort method. Here is an example:
In this code, the prevSortColumn variable will hold a reference to previously sorted column, so that will determine the following:
- whenever another column is clicked, the sort order will remain unchanged
- if same column is clicked, the sort order will change to: ascending, descending or none
This allows you to sort Blazor Grid by single column, whenever its header is clicked. When clicking on different columns, the sort order will remain the same. Only when the same column is clicked multiple times, the order will change accordingly.
Conclusion
In IntegralUI Grid component for Blazor .NET, sorting is enabled by default. It allows you to sort the grid data by single or multiple columns. Each column header has a sort button that when clicked the grid will sort the data according to the column’s sorting order. In addition, in case of single column sorting you can handle the column click event and sort the grid data manually from code.
Grid component is part of IntegralUI for Blazor, a library of native UI components that you can use to develop applications in Blazor .NET framework.