DxGridCommandColumn.FilterRowCellTemplate Property

Specifies a template used to display the command column’s filter row cell.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public RenderFragment<GridCommandColumnFilterRowCellTemplateContext> FilterRowCellTemplate { get; set; }

Property Value

Type Description
RenderFragment<GridCommandColumnFilterRowCellTemplateContext>

The template for the command column’s filter row cell.

Remarks

Declare a DxGridCommandColumn object in the Columns template to display a command column. This column displays the Clear button in the filter row cell. Users can click the button to reset the entire filter applied to the Grid.

Blazor Grid Filter Row Command Column

Define the FilterRowCellTemplate to display custom content in the filter row cell. The template accepts a GridDataColumnFilterRowCellTemplateContext object as the context parameter. You can use this parameter to access the CommandColumn and Grid objects, whose members can give you additional information about the column and the Grid, respectively.

The following example displays the custom Clear button in the filter row cell. In the button’s click handler, the ClearFilter() method is called.

Blazor Grid Filter Row Command Column Template

@using Grid.Northwind
@inject NorthwindContext Northwind

<DxGrid Data="@Data"
        ShowFilterRow="true"
        @ref="MyGrid">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" DisplayFormat="d"/>
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="ProductName"
                          FilterRowValue='"Queso"' FilterRowOperatorType="GridFilterRowOperatorType.Contains" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
        <DxGridDataColumn FieldName="Shipped" UnboundType="GridUnboundColumnType.Boolean"
                          UnboundExpression="[ShippedDate] <> Null">
            <CellDisplayTemplate>
                <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
            </CellDisplayTemplate>
        </DxGridDataColumn>
        <DxGridCommandColumn>
            <FilterRowCellTemplate>
                <DxButton Text="Clear" Click="ClearFilter"></DxButton>

            </FilterRowCellTemplate>
        </DxGridCommandColumn>
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }
    IGrid MyGrid { get; set; }

    protected override void OnInitialized() {
        Data = Northwind.Invoices
            .ToList();
    }

    void ClearFilter() {
        MyGrid.ClearFilter();
    }
}

Run Demo: Data Grid - Filter Row

See Also