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.
Files to Review
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
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";
};
}
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);
}
}