Blazor Grid — Sort and Filter Data by Selection

The DevExpress Blazor Grid component allows users to sort/filter data against multiple data columns. This example extends built-in capabilities and sorts/filters the Grid by selected rows.

Sorting and filtering by selection helps when no simple filter criteria can identify all necessary records. Consider a situation when a user needs to display only tasks relevant to today’s activities. These tasks belong to different categories, have different priorities, and due dates. In such instances, users can select all relevant records and then bring them to the top or display only those records on screen.

Implementation Details

To filter DevExpress Blazor Grid against selected rows, assign SelectedDataItems to the Data property. To sort grid data against selections, create a service column as follows:

1. Add an invisible column to the Grid component.
2. Set the column's FieldName to a unique value not present in the bound data source.
3. Set the column's UnboundType to a value other than Bound.
4. Set the column's SortMode property to Custom.
5. Handle the Grid's CustomSort event and compare rows by their selection state in the event handler.

You can now sort data against the service column to move selected rows to the top.

Files to Review

• Index.razor
• Index.razor.css

Documentation

• Selection and Focus in Blazor Grid
• Sort Data in Blazor Grid
• Filter Data in Blazor Grid

More Examples

• Blazor Grid - Custom Sorting
• Blazor Grid - Delete Selected Rows

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)