FilterRow in UWP DataGrid (SfDataGrid)

10 May 20213 minutes to read

SfDataGrid allows you to filter the data by typing the value in FilterRow which is placed either in top or bottom of the DataGrid. You can enable the FilterRow by specifying the position in SfDataGrid.FilterRowPosition property.

The FilterRowPosition property contains the below positions to load the FilterRow in SfDataGrid.

1. FixedTop – Placed in top of the SfDataGrid in frozen state
2. Top – Placed in top of the SfDataGrid.
3. Bottom – Placed in bottom of the SfDataGrid.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                       FilterRowPosition="FixedTop"
                       AllowEditing="True"
                       AutoGenerateColumns="True"
                       ItemsSource="{Binding OrderList}"/>

C#

this.dataGrid.FilterRowPosition = FilterRowPosition.FixedTop;

The each GridFilterRowCell which loads TextBox, DoubleTextBox and DateTimeEdit will contains the filter options button in right corner. You can change the FilterRowCondition at runtime. The below FilterRowConditions will be loaded based on editors.

Editors	FilterRowConditions
TextBox	Equals, NotEquals, Empty, NotEmpty, Contains, NotContains, BeginsWith, NotBeginsWith, EndsWith, NotEndsWith, Null, NotNull
SfNumericTextBox	Equals, NotEquals, GreaterThan, GreaterThanOrEqual, LessThan, LessThanOrEqual, Null, NotNull

You can remove the filter options button by using GridColumn.FilterRowOptionsVisibility property and also you can change the default FilterRowCondition of particular column using GridColumn.FilterRowCondition property.

XAML

<syncfusion:GridTextColumn MappingName="CustomerID"
                           FilterRowCondition="Contains"
                           FilterRowOptionsVisibility="Collapsed"
                           HeaderText="Customer ID"/>

C#

this.dataGrid.Columns[0].FilterRowCondition = FilterRowCondition.Contains;
this.dataGrid.Columns[0].FilterRowOptionsVisibility = Visibility.Collapsed;

You have to set true to GridColumn.ImmediateUpdateColumnFilter property for immediate filtering while typing the value.

XAML

<syncfusion:GridTextColumn MappingName="CustomerID"
                           ImmediateUpdateColumnFilter="True"
                           HeaderText="Customer ID"/>

C#

this.dataGrid.Columns[0].ImmediateUpdateColumnFilter = true;

Built-In Editors

The FilterRow will loads with different editors based on underlying type of each column. You can change this default editors by using GridColumn.FilterRowEditorType property. The FilterRow contains the below editors type.

EditorType	Editor	Renderer
TextBox	TextBox	GridFilterRowTextBoxRenderer
Numeric	DoubleTextBox	GridFilterRowNumericRenderer
CheckBox	CheckBox	GridFilterRowCheckBoxRenderer