In this video, I’ll show you how to sort data in the DevExpress Blazor Grid.
We’ll look at how to specify initial sort settings and apply custom sorting. So let’s get started.
I’ve already added the Grid component to the application and bound it to data.
Data is fetched from the Northwind database. Here I’ve created context and entity classes.
My grid contains several columns that display information about orders
Order date, product name, country, and so on.
So let’s see how users can sort grid data.
When I click the Product Name column header, data is sorted against this column.
When I click the header again, the sort order changes.
To clear sorting, I click the header with the Ctrl key pressed.
Users can also sort data against multiple columns. I hold the Shift key and click two column headers.
You can also specify initial sort settings. I specify sort indexes for two columns.
For the Country column, I also specify the sort order – Descending.
I’ll also disable sorting for the Quantity column.
When I run the application, the grid already displays sorted data.
First, the grid sorts data by the ProductName column whose SortIndex is 0 and then by the Country column.
Note that if I try to click the Quantity column header, the data is not sorted by this column.
You can also use other API members to manage data sorting. Now I’ll demonstrate how to use the grid’s methods.
First, I add the @ref attribute for my grid.
Then I add two DxButtons to the page and handle their click events.
Here I use the grid’s SortBy method, and here I use the ClearSort method.
I run the app
Currently, data is sorted by two columns. When I click this button, data is also sorted by the City column.
And this button clears sorting for all columns.
Our Blazor Grid can sort data in different modes: by value, by display text, or it can use custom logic.
I’ll demonstrate these modes on the OrderDate column that contains date-time values.
I remove sort settings for other columns and specify the sort index for the OrderDate column.
I also set the SortMode property to Value. This means that column data will be sorted by values.
As you can see, the column data is sorted by values, from the earliest date to the most recent date.
Now I specify the DisplayText sort mode
And run the application again.
The Order Date column values are compared character by character.
The column displays January 1 for different years, then it displays January 10. And January 19 appears before January 2.
Now let's look at how to apply custom logic to sort data. For example, I need to sort dates without taking into account the year part.
First, I specify the column’s sort mode to custom.
Then I add the OnCustomSort method to the @code block and specify it as a handler for the CustomSort event.
The OnCustomSort method implements a logic that compares column values.
Here I specify the field name whose values should be compared.
To access column values, I use the Value1 and Value2 arguments.
Let’s run the app.
You can see that January 2nd is displayed after January 1st, but the year part is ignored.
January 3rd goes after January 2nd, and so on.
And that's it for this video. If you liked it, please give us a thumbs up.
If you have any questions, please comment below.
And don’t forget to subscribe and ring the bell so you get notified anytime we release new content.
Thanks for watching and thank you for choosing DevExpress.