DxGrid.ShowFilterRow Property

Specifies whether the Grid displays the filter row.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(false)]
[Parameter]
public bool ShowFilterRow { get; set; }

Property Value

Type	Default	Description
Boolean	false

true to display the filter row; otherwise, false.

Remarks

Enable the ShowFilterRow option to activate a row that allows users to filter Grid data. The filter row displays in-place text editors for all data columns. When a user types into an editor, the Grid creates a filter condition based on the editor value and applies this condition to the corresponding column.

razor

<DxGrid Data="@DataSource"
        ShowFilterRow="true">
    @*...*@
</DxGrid>

Run Demo: Data Grid - Filter Row View Example: Filter the column by multiple values View Example: Implement a date range filter

For additional information about the filter row, see the following topic: Filter Row in Blazor Grid.

Apply a Filter When a User Types Text

To filter data as a user types in the filter row, follow the steps below:

Define a FilterRowCellTemplate and put a DxTextBox editor in the template.
Set the editor’s BindValueMode to OnInput to update the actual editor text each time when a user changes input text.
Handle the TextChanged event to apply a filter when editor text changes.

razor

<DxGridDataColumn Caption="Summary" FieldName="Summary">
    <FilterRowCellTemplate>
        <DxTextBox Text="@((string)context.FilterRowValue)" BindValueMode=BindValueMode.OnInput
                   TextChanged="(string v) => context.FilterRowValue = v" />
    </FilterRowCellTemplate>
</DxGridDataColumn>

Customize Filter Row Editors

You can customize filter row editors in the following ways:

Declare and customize editor settings in a column’s EditSettings property markup.
Handle the CustomizeFilterRowEditor event to modify editor settings at runtime.
Create FilterRowCellTemplate to implement custom filter row cell content.

Implements

ShowFilterRow