Filter Row in WinUI DataGrid

4 Oct 202210 minutes to read

SfDataGrid provides built-in row (called FilterRow) to filter the records. You can enable the FilterRow by specifying the position where it should be displayed by setting SfDataGrid.FilterRowPosition property.

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

• FixedTop - Placed in top of the SfDataGrid in frozen state.
• Top - Placed in top of the SfDataGrid.
• Bottom - Placed in bottom of the SfDataGrid.
• None - No FilterRow will be placed.

XAML

<dataGrid:SfDataGrid x:Name="sfDataGrid"
                       FilterRowPosition="FixedTop"
                       AutoGenerateColumns="True"
                       ItemsSource="{Binding Orders}"/>

C#

this.sfDataGrid.FilterRowPosition = FilterRowPosition.FixedTop;

You can get the row index of FilterRow by using the SfDataGrid.GetFilterRowIndex method.

C#

int filterRowIndex = this.sfDataGrid.GetFilterRowIndex();

You can check whether the specified row index is FilterRow index, by using SfDataGrid.IsFilterRowIndex helper method.

C#

bool isFilterRowIndex = this.sfDataGrid.IsFilterRowIndex(1);

Built-in Editors

By default, FilterRow loads the editors based on underlying property type to filter the data easily. You can change the default editors by using GridColumn.FilterRowEditorType property.

Below are the built-in FilterRow editor types supported in SfDataGrid.

FilterRowEditor Type	Editor Control	Renderer	Description
TextBox	TextBox	GridFilterRowTextBoxRenderer	Used for filtering the string values.
Numeric	TextBox	GridFilterRowTextBoxRenderer	Used for filtering the numeric values.
CheckBox	CheckBox	GridFilterRowCheckBoxRenderer	Used for filtering the Boolean values.
Date	SfCalendarDatePicker	GridFilterRowDateRenderer	Used for filtering the DateTimeOffset values.

Filter options

Based on the editor type, FilterRowCell displays the filter conditions in dropdown where you can easily switch between the conditions to filter the data. You can disable filter options by setting GridColumn.FilterRowOptionsVisibility property.

XAML

<dataGrid:GridTextColumn MappingName="OrderID" 
                              FilterRowOptionsVisibility="Collapsed"
                              FilterRowEditorType="Numeric"/>

C#

this.sfDataGrid.Columns[0].FilterRowOptionsVisibility = Visibility.Collapsed;

Below are the filter conditions supported by different filter row editors in SfDataGrid.

Numeric Editor	TextBox Editor	CheckBox Editor	Date Editor
When integer, double, short, decimal, byte or long are bound to the  GridColumn , the Numeric editor type are loaded in FilterRowCell .	When string value is bounded to the GridColumn or the items is dynamic, then TextBox editor type are loaded in FilterRowCell .	When the Boolean type is bounded to the GridColumn , the CheckBox editor is loaded in FilterRowCell .	When the DateTimeOffset type is bounded to the GridDateColumn , the Date editor is loaded in FilterRowCell .
The default filter condition is Equals, and the following filter conditions are available in the numeric filter. Equals Does Not Equal Null Not Null Less Than Less Than or Equal Greater Than Greater Than or Equal	The default filter condition is Begins With, and the following filter conditions are available in the text filter. Equals Does Not Equal Null Not Null Begins With Does Not Begin With Ends With Does Not End With Contains Does Not Contain Empty Not Empty	Always equals filter condition will be applied for filtering the CheckBox value.	The default filter condition is Equals, and the following filter conditions are available in the date filter. Equals Does Not Equal Null Not Null Before Before or Equal After After or Equal

You can change the default FilterRow condition for a corresponding column by using GridColumn.FilterRowCondition property.

XAML

<dataGrid:GridTextColumn MappingName="OrderID" 
                              FilterRowCondition="LessThanOrEqual"
                              FilterRowEditorType="Numeric"/>

C#

this.sfDataGrid.Columns[0].FilterRowCondition = FilterRowCondition.LessThanOrEqual;

Filtering null values

You can enable or disable filtering of null values by setting GridColumn.AllowBlankFilters property. The default value is true.
When null value filtering is enabled, the filter options loaded with two additional options (“Null” and “Not Null”) to filter the null values.

XAML

<dataGrid:GridTextColumn MappingName="OrderID" 
                              AllowBlankFilters="False"
                              FilterRowEditorType="Numeric"/>

C#

this.sfDataGrid.Columns[0].AllowBlankFilters = false;

XAML

<dataGrid:GridTextColumn MappingName="OrderID"
                           AllowBlankFilters="True"
                           FilterRowEditorType="Numeric"/>

C#

this.sfDataGrid.Columns[0].AllowBlankFilters = true;

Instant Filtering

By default, filters are applied to the columns when moving to other cells or pressing enter key. You can apply filter when typing or selecting in editor itself by setting GridColumn.ImmediateUpdateColumnFilter as true.

XAML

<dataGrid:GridTextColumn MappingName="CustomerID"
                           FilterRowEditorType="TextBox"
                           ImmediateUpdateColumnFilter="True"/>

C#

this.sfDataGrid.Columns[2].ImmediateUpdateColumnFilter = true;

Disable filtering for a particular FilterRowCell

By default, you can filter the records by editing filter row cell. You can disable this editing by using CurrentCellBeginEdit event.

C#

this.sfDataGrid.CurrentCellBeginEdit += sfDataGrid_CurrentCellBeginEdit;

void sfDataGrid_CurrentCellBeginEdit(object sender, CurrentCellBeginEditEventArgs e)
{
    //Cancel the editing for filter row cell in OrderID Column
    if (e.Column.MappingName == "OrderID" && sfDataGrid.IsFilterRowIndex(e.RowColumnIndex.RowIndex))
        e.Cancel = true;
}

You can collapse the FilterOption button using FilterRowOptionsVisibility property.

XAML

<dataGrid:GridNumericColumn MappingName="OrderID" 
                              FilterRowOptionsVisibility="Collapsed"/>

Styling

Filter row style

You can customize the style of filter row by writing style of TargetType FilterRowControl.

XAML

<Page.Resources>
    xmlns:dataGridRowFilter="using:Syncfusion.UI.Xaml.DataGrid.RowFilter"

    <Style TargetType="dataGridRowFilter:FilterRowControl">
        <Setter Property="Background" Value="BlanchedAlmond"/>
    </Style>
</Page.Resources>

Customizing filter row cell

You can customize the filter row cell by overriding the GridFilterRowCell. You have to override the GetGridCell method in RowGenerator to load the customized GridFilterRowCell.

C#

public class GridFilterRowCellExt : GridFilterRowCell
{
    public GridFilterRowCellExt()
        : base()
    { }
}

public class CustomRowGenerator : RowGenerator
{

    public CustomRowGenerator(SfDataGrid dataGrid)
        : base(dataGrid)
    {
    }

    /// <summary>
    /// Return the Custom FilterRowCell
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <returns>GridCell</returns>
    protected override GridCell GetGridCell<T>()
    {
        //If the Cell is FilterRowCell return custom FilterRowCell
        if (typeof(T) == typeof(GridFilterRowCell))
            return new GridFilterRowCellExt();
        return base.GetGridCell<GridCell>();
    }
}

public MainWindow()
{
    InitializeComponent();
    this.sfDataGrid.RowGenerator = new CustomRowGenerator(this.sfDataGrid);
}

Customizing Filter row editors

Customizing the filter row renderer

SfDataGrid allows you to customize the filter row renderer behavior by overriding the corresponding renderer associated with the filter row cell. Each renderer have a set of virtual methods for handling the filter row behaviors. You can also create new renderers instead of overriding the existing renderer.
You can customize the default TextBox editor behavior by overriding GridFilterRowTextBoxRenderer class and add the custom renderer to FilterRowCellRenderers.

XAML

<dataGrid:GridTextColumn MappingName="CustomerName"
                           FilterRowEditorType="TextBoxExt"/>

C#

public class GridFilterRowTextBoxRendererExt : GridFilterRowTextBoxRenderer
{

    public GridFilterRowTextBoxRendererExt()
        : base()
    {
    }
}
    
public MainWindow()
{
    InitializeComponent();
    this.sfDataGrid.FilterRowCellRenderers.Add("TextBoxExt", new GridFilterRowTextBoxRendererExt());
}