DxTreeList.ShowFilterRow Property

Specifies whether the TreeList displays the filter row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[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 TreeList data. The filter row displays in-place text editors for all data columns. When a user types into an editor, the TreeList creates a filter condition based on the editor value and applies this condition to the corresponding column.

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

Run Demo: TreeList - Filter Row

For more information about the filter row, see the following topic: Filter API in Blazor TreeList.

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 a user changes input text.
• Handle the TextChanged event to apply a filter when editor text changes.

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

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

ShowFilterRow