Skip to main content

DxGridCommandColumn.FilterRowCellTemplate Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.dll

NuGet Package: DevExpress.Blazor

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.

The command column also displays CRUD-related buttons (New, Edit, and Delete). To hide these buttons, disable the NewButtonVisible, EditButtonVisible, and DeleteButtonVisible options.

Blazor Grid Filter Row Command Column

Define the FilterRowCellTemplate to display custom content in the filter row cell. Bind these editors to nullable type variables. 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 Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="@Data"
        ShowFilterRow="true"
        @ref="MyGrid">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID" 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 NewButtonVisible="false"
                             EditButtonVisible="false"
                             DeleteButtonVisible="false">
            <FilterRowCellTemplate>
                <DxButton Text="Clear" Click="ClearFilter"></DxButton>

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

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

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

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

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Run Demo: Data Grid - Filter Row View Example: How to implement filter operator selector

See Also