Example T1106516
Visible to All Users

Grid for Blazor - Incorporate a selector for filter row operator type

This example demonstrates how you can extend our Blazor Grid’s Filter Row with a custom operator selector.

Within each grid column, the FilterRowCellTemplate property specifies the template used for the filter row cell. The template contains an OperatorType component (see the OperatorType.razor file). The component includes a DxButton that activates a dropdown window with a list of operators. When a user selects an operator, the column's FilterRowOperatorType property is set to the specified value and the column values are filtered.

Grid with filter

Files to Review

Does this example address your development requirements/objectives?

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

Example Code

DxGridFilterOperatorSelector/Components/OperatorType.razor
Razor
<style> @("." + IconCssClass) { width: 16px; height: 16px; -webkit-mask-image: url(@CurrentOperatorType.IconPath); mask-image: url(@CurrentOperatorType.IconPath); background-color: currentColor; } </style> <div class="filter-type-container" id="@PositionTargetID"> <DxButton CssClass="filter-type-button" IconCssClass="@IconCssClass" Click="() => IsOpen = !IsOpen"></DxButton> <DxDropDown @bind-IsOpen="@IsOpen" HeaderVisible="false" FooterVisible="false" PositionMode="DropDownPositionMode.Bottom" PositionTarget="@("#" + PositionTargetID)"> <BodyTemplate> <DxListBox Data="OperatorTypes" @bind-Value="CurrentOperatorType" TextFieldName="@(nameof(OperatorTypeWrapper.DisplayText))"></DxListBox> </BodyTemplate> </DxDropDown> <div> @ChildContent </div> </div> @code { [Parameter] public GridDataColumnFilterRowCellTemplateContext FilterContext { get; set; } [Parameter] public RenderFragment ChildContent { get; set; } List<OperatorTypeWrapper> OperatorTypes { get; set; } OperatorTypeWrapper CurrentOperatorType { get => OperatorTypes.First((ot) => ot.Value == FilterContext.DataColumn.FilterRowOperatorType); set { FilterContext.Grid.BeginUpdate(); FilterContext.DataColumn.FilterRowOperatorType = value.Value; FilterContext.Grid.EndUpdate(); IsOpen = false; } } bool IsOpen { get; set; } = false; string PositionTargetID => $"dropdown-target-container-{FilterContext.DataColumn.FieldName}"; string IconCssClass => $"icon-class-{FilterContext.DataColumn.FieldName}"; protected override void OnInitialized() { OperatorTypes = Enum.GetValues(typeof(GridFilterRowOperatorType)) .OfType<GridFilterRowOperatorType>() .Select(t => new OperatorTypeWrapper(t, t.ToString())).ToList(); } class OperatorTypeWrapper { public OperatorTypeWrapper(GridFilterRowOperatorType value, string displayText) { Value = value; DisplayText = displayText; } public GridFilterRowOperatorType Value { get; set; } public string DisplayText { get; set; } public string IconPath => $"images/filterIcons/{DisplayText}.svg"; }; }
DxGridFilterOperatorSelector/Pages/Grid.razor
Razor
@page "/grid" @using DxGridFilterOperatorSelector.Data @using DxGridFilterOperatorSelector.Components @inject WeatherForecastService ForecastService @if (forecasts == null) { <p><em>Loading...</em></p> } else { <style> .filter-type-container { display: flex; } .filter-type-container > div { width: 100%; } .filter-type-button { margin-right: 5px; } </style> <DxGrid Data="@forecasts" ShowFilterRow="true" CssClass="mw-1100"> <Columns> <DxGridDataColumn Caption="Date" FieldName="Date"> <FilterRowCellTemplate> <OperatorType FilterContext="@context"> <DxDateEdit Date="(DateTime?)context.FilterRowValue" DateChanged="(DateTime? v) => context.FilterRowValue = v" /> </OperatorType> </FilterRowCellTemplate> </DxGridDataColumn> <DxGridDataColumn Caption="Summary" FieldName="Summary"> <FilterRowCellTemplate> <OperatorType FilterContext="@context"> <DxTextBox Text="@((string)context.FilterRowValue)" TextChanged="(string v) => context.FilterRowValue = v" /> </OperatorType> </FilterRowCellTemplate> </DxGridDataColumn> <DxGridDataColumn Caption="Temperature" FieldName="TemperatureF" FilterRowOperatorType="GridFilterRowOperatorType.Less"> <FilterRowCellTemplate> <OperatorType FilterContext="@context"> <DxSpinEdit Value="(int?)context.FilterRowValue" ValueChanged="(int? v) => context.FilterRowValue = v" /> </OperatorType> </FilterRowCellTemplate> </DxGridDataColumn> </Columns> </DxGrid> } @code { private WeatherForecast[]? forecasts; protected override async Task OnInitializedAsync() { forecasts = await ForecastService.GetForecastAsync(DateTime.Now); } }

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.