DxTreeListDataColumn.FilterRowCellTemplate Property
Allows you to replace default content with custom content in the column’s filter row cell.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public RenderFragment<TreeListDataColumnFilterRowCellTemplateContext> FilterRowCellTemplate { get; set; }Property Value
| Type | Description |
|---|---|
| RenderFragment<TreeListDataColumnFilterRowCellTemplateContext> | The filter row cell template. |
Remarks
Enable the ShowFilterRow option to activate a row that allows users to filter data. The filter row displays automatically generated in-place editors for all data columns. Editor types depend on data types of the corresponding column fields. You can customize settings of automatically generated editors, hide them, or replace them with other editors.
Place one or more editors in a column’s FilterRowCellTemplate to display custom content in the filter row cell. To define a custom template for all data cells, define the TreeList’s DataColumnFilterRowCellTemplate. Both templates include the context parameter that has the following properties:
- DataColumn
- Allows you to access the processed column.
- TreeList
- Allows you to access the TreeList and its extensive API.
- FilterCriteria
- Allows you to apply filter criteria to the column.
- FilterRowValue
- Allows you to bind an editor value to a filter row value. Note that the editor should have a nullable value type.
In the following code snippet, the Mass column declares FilterRowCellTemplate. The template contains a combobox editor that allows users to select a filter from a set of predefined criteria.
@using DevExpress.Data.Filtering
@inject SpaceObjectDataProvider SpaceObjectDataProvider
<DxTreeList Data="TreeListData" ChildrenFieldName="Satellites" ShowFilterRow="true">
<Columns>
<DxTreeListDataColumn FieldName="Name" />
<DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" />
<DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2">
<HeaderCaptionTemplate>Mass, 10<sup>21</sup> × kg</HeaderCaptionTemplate>
<FilterRowCellTemplate>
<DxComboBox @bind-Value="context.FilterCriteria"
Data="MassIntervals" ValueFieldName="Criteria" TextFieldName="DisplayText"
ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
</FilterRowCellTemplate>
</DxTreeListDataColumn>
<DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" />
<DxTreeListDataColumn FieldName="Volume10pow9KM3" DisplayFormat="N2">
<HeaderCaptionTemplate>Volume, 10<sup>9</sup> × km<sup>3</sup></HeaderCaptionTemplate>
</DxTreeListDataColumn>
<DxTreeListDataColumn FieldName="SurfaceGravity" DisplayFormat="N2">
<HeaderCaptionTemplate>Gravity, m/s<sup>2</sup></HeaderCaptionTemplate>
</DxTreeListDataColumn>
</Columns>
</DxTreeList>
@code {
object TreeListData { get; set; }
static readonly IReadOnlyList<PriceFilterInterval> MassIntervals = new PriceFilterInterval[] {
new("[Mass10pow21kg] < 100", "< 100"),
new("[Mass10pow21kg] between (100, 10000)", "100 to 10 000"),
new("[Mass10pow21kg] between (10000, 1000000)", "10 000 to 1 000 000"),
new("[Mass10pow21kg] > 1000000", "> 1 000 000")
};
record PriceFilterInterval(CriteriaOperator Criteria, string DisplayText) {
public PriceFilterInterval(string CriteriaText, string DisplayText)
: this(CriteriaOperator.Parse(CriteriaText), DisplayText) {}
}
protected override async Task OnInitializedAsync() {
TreeListData = SpaceObjectDataProvider.GenerateData();
}
}
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
FilterRowCellTemplateand put a DxTextBox editor in the template. - Set the editor’s BindValueMode to
OnInputto 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>