Example T1273428
Visible to All Users

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

Documentation

More Examples

Does this example address your development requirements/objectives?

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

Example Code

SortFilterBySelection/Components/Pages/Index.razor
Razor
@page "/" @using SortFilterBySelection.Services @attribute [StreamRendering(true)] @rendermode InteractiveServer @inject WeatherForecastService ForecastService <div> <DxGrid @ref="Grid" CustomSort="Grid_CustomSort" Data="@forecasts" SelectedDataItems="@SelectedDataItems" SelectedDataItemsChanged="OnSelectedDataItemsChanged"> <Columns> <DxGridSelectionColumn /> <DxGridDataColumn Caption="Date" FieldName="Date" /> <DxGridDataColumn Caption="Temperature (C)" FieldName="TemperatureC" /> <DxGridDataColumn Caption="Temperature (F)" FieldName="TemperatureF" /> <DxGridDataColumn Caption="Summary" FieldName="Summary" /> <DxGridDataColumn UnboundType="GridUnboundColumnType.Boolean" FieldName="ServiceColumn" Visible="false" SortMode="GridColumnSortMode.Custom" /> </Columns> <ToolbarTemplate> <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain"> <DxToolbarItem @bind-Checked="@IsSorted" GroupName="Sorting" Text="Bring Selection to Top" Click="SortBySelection" IconCssClass="grid-toolbar-sort" /> <DxToolbarItem @bind-Checked="@IsFiltered" GroupName="Filtering" Text="Display Selected Only" Click="FilterBySelection" BeginGroup="true" IconCssClass="grid-toolbar-filter" /> </DxToolbar> </ToolbarTemplate> </DxGrid> </div> @code { IGrid Grid; private WeatherForecast[]? forecasts; IReadOnlyList<object> SelectedDataItems; bool IsFiltered = false; bool IsSorted = false; protected override async Task OnInitializedAsync() { forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now)); SelectedDataItems = forecasts.Where(x => x.Date.DayOfWeek >= DayOfWeek.Friday).ToList(); } void SortBySelection() { Grid.SortBy("ServiceColumn", GridColumnSortOrder.Ascending, -1); if (IsSorted) Grid.SortBy("ServiceColumn", GridColumnSortOrder.Ascending, 0); } void Grid_CustomSort(GridCustomSortEventArgs e) { if (e.FieldName == "ServiceColumn") { var selectionState1 = e.Grid.IsDataItemSelected(e.DataItem1); var selectionState2 = e.Grid.IsDataItemSelected(e.DataItem2); e.Result = selectionState2.CompareTo(selectionState1); e.Handled = true; } } void FilterBySelection() { Grid.BeginUpdate(); if (IsFiltered) Grid.Data = SelectedDataItems; else Grid.Data = forecasts; Grid.EndUpdate(); } void OnSelectedDataItemsChanged(IReadOnlyList<object> newSelection) { SelectedDataItems = newSelection; if (IsFiltered) { Grid.BeginUpdate(); Grid.Data = SelectedDataItems; Grid.EndUpdate(); } if (IsSorted) SortBySelection(); } }
SortFilterBySelection/Components/Pages/Index.razor.css
CSS
::deep .grid-toolbar-sort, ::deep .grid-toolbar-filter { background-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-position: center center; background-color: currentColor; height: 16px; width: 16px; opacity: 0.7; } ::deep .grid-toolbar-sort { -webkit-mask-image: url("images/sort.svg"); mask-image: url("images/sort.svg"); } ::deep .grid-toolbar-filter { -webkit-mask-image: url("images/filter.svg"); mask-image: url("images/filter.svg"); }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.