DxGrid.DataColumnFilterRowCellTemplate Property

Allows you to replace automatically generated editors with custom content in all filter row cells displayed for data columns.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<GridDataColumnFilterRowCellTemplateContext> DataColumnFilterRowCellTemplate { get; set; }

Property Value

Type	Description
RenderFragment<GridDataColumnFilterRowCellTemplateContext>	The common template for filter row cells.

Remarks

Enable the ShowFilterRow option to activate a row that allows users to filter data. The filter row displays automatically generated in-place editors for all data columns. Editor types depend on data types of the corresponding column fields. You can customize settings of automatically generated editors, hide them, or replace them with other editors.

Read Tutorial: Filter Row

Place one or more editors in a column’s FilterRowCellTemplate to display custom content in the filter row cell. To define a custom template for all cells, define the Grid’s DataColumnFilterRowCellTemplate. Both templates include the context parameter that has the following properties:

DataColumn

Allows you to access the processed column.

Grid

Allows you to access the Grid and its extensive API.

FilterCriteria

Allows you to apply filter criteria to the column.

FilterRowValue

Allows you to bind an editor value to a filter row value. Note that the editor should have a nullable value type.

Note

The Grid does not render automatically generated editors in filter row cells if you define DataColumnFilterRowCellTemplate.

The following code snippet defines a common template for all filter row cells except the Date column’s cell:

Razor

<DxGrid Data="@forecasts"
        ShowFilterRow="true"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridDataColumn FieldName="Date" FilterRowEditorVisible=false />
        <DxGridDataColumn FieldName="TemperatureC" DisplayFormat="{0}℃" />
        <DxGridDataColumn FieldName="Wind" DisplayFormat="{0} km/h" />
        <DxGridDataColumn FieldName="Humidity" DisplayFormat="{0}%" />
        <DxGridDataColumn FieldName="Pressure" DisplayFormat="{0} mb" />
    </Columns>
    <DataColumnFilterRowCellTemplate>
        @if(context.DataColumn.FieldName != "Date") {
            <DxSpinEdit Value="(int?)context.FilterRowValue"
                        ValueChanged="(int? v) => context.FilterRowValue = v"
                        ShowSpinButtons="false"
                        ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
                <Buttons>
                    <DxEditorButton IconCssClass="editor-icon editor-icon-caret-left"
                                    Tooltip="Decrement by 1"
                                    Position="@EditorButtonPosition.Left"
                                    Click="() => OnIncrementButtonClick(context, false)" />
                    <DxEditorButton IconCssClass="editor-icon editor-icon-caret-right"
                                    Tooltip="Increment by 1"
                                    Click="() => OnIncrementButtonClick(context, false)" />
                </Buttons>
                </DxSpinEdit>
        }
    </DataColumnFilterRowCellTemplate>
</DxGrid>

@code {
    private WeatherForecast[]? forecasts { get; set; }

    void OnIncrementButtonClick(GridDataColumnFilterRowCellTemplateContext context, bool isIncrementButton) {
        var oldValue = context.FilterRowValue != null ? (int)context.FilterRowValue : 0;
        context.FilterRowValue = oldValue + (isIncrementButton ? 1 : -1);
    }

    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecasts();
    }
}

WeatherForecast.cs

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public int Wind { get; set; }
    public int Humidity { get; set; }
    public int Pressure { get; set; }
}

WeatherForecastService

public class WeatherForecastService {
    public Task<WeatherForecast[]> GetForecasts() {
        List<WeatherForecast> forecasts = new List<WeatherForecast>();
        forecasts.Add(new WeatherForecast() { Date = DateTime.Today, TemperatureC = 20, Wind = 10, Humidity = 69, Pressure = 1037});
        forecasts.Add(new WeatherForecast() { Date = DateTime.Today.AddDays(1), TemperatureC = 25, Wind = 10, Humidity = 47, Pressure = 956 });
        forecasts.Add(new WeatherForecast() { Date = DateTime.Today.AddDays(2), TemperatureC = 23, Wind = 10, Humidity = 71, Pressure = 976 });
        forecasts.Add(new WeatherForecast() { Date = DateTime.Today.AddDays(3), TemperatureC = 25, Wind = 10, Humidity = 61, Pressure = 1047 });
        return Task.FromResult(forecasts.ToArray());
    }
}

Program.cs

builder.Services.AddSingleton<WeatherForecastService>();

CSS

.editor-icon {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}
.editor-icon-caret-right {
    -webkit-mask-image: url("../images/icons/caret-right.svg");
    mask-image: url("../images/icons/caret-right.svg");
}
.editor-icon-caret-left {
    -webkit-mask-image: url("../images/icons/caret-left.svg");
    mask-image: url("../images/icons/caret-left.svg");
}

For more information about templates in the Grid component, refer to the following topic: Templates in Blazor Grid.

Implements

DataColumnFilterRowCellTemplate