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:
- Add an invisible column to the Grid component.
- Set the column's FieldName to a unique value not present in the bound data source.
- Set the column's UnboundType to a value other than
Bound. - Set the column's SortMode property to
Custom. - 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
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();
}
}
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");
}