DxGrid.DataColumnFilterRowCellTemplate Property

Specifies a common template used to display all filter row cells in the Grid data columns.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.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

Specify the DataColumnFilterRowCellTemplate to define the common template for Grid filter row cells. To define a filter row template for an individual data column, use the column’s FilterRowCellTemplate property.

The DataColumnFilterRowCellTemplate accepts a GridDataColumnFilterRowCellTemplateContext object as the context parameter. You can use the parameter’s members to get the DataColumn, FilterCriteria, and FilterRowValue. You can also access the Grid object and use its members to obtain additional information about the component.

In the example below, the common template contains DxSpinEdit<T> control. In the Date column, the individual FilterRowCellTemplate overrides the common template to display a date editor.

<DxGrid Data="@forecasts" ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="Date">
            <FilterRowCellTemplate>
                <DxDateEdit Date="(DateTime?)context.FilterRowValue"
                            DateChanged="(DateTime? v) => context.FilterRowValue = v" 
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"/>
            </FilterRowCellTemplate>
        </DxGridDataColumn>
        <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>
        <DxSpinEdit Value="(int?)context.FilterRowValue"
                    ValueChanged="(int? v) => context.FilterRowValue = v" 
                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"/>
    </DataColumnFilterRowCellTemplate>
</DxGrid>

@code {
    private WeatherForecast[]? forecasts;
    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

Editor Render Mode

The Grid component renders editors in the filter row as standalone components with borders and paddings between an editor and cell borders. Set the EditorRenderMode property to Integrated to render editors, which are directly placed in the DataColumnFilterRowCellTemplate template, so that they occupy the entire cell. In this mode, editor borders are not displayed.

For more information about filter row, see the following topic: Filter Row.

Implements

DataColumnFilterRowCellTemplate