Custom Drop-down Filter

• May 30, 2019
• 6 minutes to read

If you do not want to use a built-in drop-down filter, you can customize it or create a new custom drop-down filter.

How to Customize Drop-down Filter

This example shows how to replace the Date column’s drop-down filter items with custom items:

• (All) - Cancels filtering
• Registered in 2008 - Shows users that were registered in 2008
• Registered in 2009 - Shows users that were registered in 2009

The image below shows the result:

View Example: How to customize filter items within a column's Filter Dropdown

Window1.xaml

<Window x:Class="DXGrid_CustomizingFilterDropdown.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        Title="Window1" Height="300" Width="535">
    <Grid>

        <dxg:GridControl x:Name="grid" ItemsSource="{Binding AccountList}">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="UserName"/>
                <dxg:GridColumn FieldName="RegistrationDate" FilterPopupMode="List"/>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True" ShowFilterPopup="TableView_ShowFilterPopup" />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>

Window1.xaml.cs

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Documents;
using DevExpress.Data.Filtering;
using DevExpress.Xpf.Grid;

namespace DXGrid_CustomizingFilterDropdown {

    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
            this.DataContext = new MyViewModel();

        }

        private void TableView_ShowFilterPopup(object sender, FilterPopupEventArgs e) {
            if (e.Column.FieldName != "RegistrationDate") return;
            List<object> filterItems = new List<object>();
            filterItems.Add(new CustomComboBoxItem()
            {
                DisplayValue = "(All)",
                EditValue = new CustomComboBoxItem()
            });
            filterItems.Add(new CustomComboBoxItem()
            {
                DisplayValue = "Registered in 2008",
                EditValue = CriteriaOperator.Parse(string.Format(
                "[RegistrationDate] >= #{0}# AND [RegistrationDate] < #{1}#",
                new DateTime(2008, 1, 1), new DateTime(2009, 1, 1)))
            });
            filterItems.Add(new CustomComboBoxItem()
            {
                DisplayValue = "Registered in 2009",
                EditValue = CriteriaOperator.Parse(string.Format(
                "[RegistrationDate] >= #{0}# AND [RegistrationDate] < #{1}#",
                new DateTime(2009, 1, 1), new DateTime(2010, 1, 1)))
            });
            e.ComboBoxEdit.ItemsSource = filterItems;            
        }
    }

    public class MyViewModel {
        public MyViewModel() {
            AccountList = CreateAccounts();
        }

        public List<Account> AccountList { get; set; }


        private List<Account> CreateAccounts() {
            List<Account> list = new List<Account>();
            list.Add(new Account() {
                UserName = "Nick White",
                RegistrationDate = DateTime.Today
            });
            list.Add(new Account() {
                UserName = "Jack Rodman",
                RegistrationDate = new DateTime(2009, 5, 10)
            });
            list.Add(new Account() {
                UserName = "Sandra Sherry",
                RegistrationDate = new DateTime(2008, 12, 22)
            });
            list.Add(new Account() {
                UserName = "Sabrina Vilk",
                RegistrationDate = DateTime.Today
            });
            list.Add(new Account() {
                UserName = "Mike Pearson",
                RegistrationDate = new DateTime(2008, 10, 18)
            });
            return list;
        }
    }
    public class Account {
        public string UserName { get; set; }
        public DateTime RegistrationDate { get; set; }
    }
}

Window1.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Windows
Imports System.Windows.Documents
Imports DevExpress.Data.Filtering
Imports DevExpress.Xpf.Grid

Namespace DXGrid_CustomizingFilterDropdown

    Partial Public Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
            Me.DataContext = New MyViewModel()

        End Sub

        Private Sub TableView_ShowFilterPopup(ByVal sender As Object, ByVal e As FilterPopupEventArgs)
            If e.Column.FieldName <> "RegistrationDate" Then
                Return
            End If
            Dim filterItems As New List(Of Object)()
            filterItems.Add(New CustomComboBoxItem() With {.DisplayValue = "(All)", .EditValue = New CustomComboBoxItem()})
            filterItems.Add(New CustomComboBoxItem() With {.DisplayValue = "Registered in 2008", .EditValue = CriteriaOperator.Parse(String.Format("[RegistrationDate] >= #{0}# AND [RegistrationDate] < #{1}#", New Date(2008, 1, 1), New Date(2009, 1, 1)))})
            filterItems.Add(New CustomComboBoxItem() With {.DisplayValue = "Registered in 2009", .EditValue = CriteriaOperator.Parse(String.Format("[RegistrationDate] >= #{0}# AND [RegistrationDate] < #{1}#", New Date(2009, 1, 1), New Date(2010, 1, 1)))})
            e.ComboBoxEdit.ItemsSource = filterItems
        End Sub
    End Class

    Public Class MyViewModel
        Public Sub New()
            AccountList = CreateAccounts()
        End Sub

        Public Property AccountList() As List(Of Account)


        Private Function CreateAccounts() As List(Of Account)
            Dim list As New List(Of Account)()
            list.Add(New Account() With {.UserName = "Nick White", .RegistrationDate = Date.Today})
            list.Add(New Account() With {.UserName = "Jack Rodman", .RegistrationDate = New Date(2009, 5, 10)})
            list.Add(New Account() With {.UserName = "Sandra Sherry", .RegistrationDate = New Date(2008, 12, 22)})
            list.Add(New Account() With {.UserName = "Sabrina Vilk", .RegistrationDate = Date.Today})
            list.Add(New Account() With {.UserName = "Mike Pearson", .RegistrationDate = New Date(2008, 10, 18)})
            Return list
        End Function
    End Class
    Public Class Account
        Public Property UserName() As String
        Public Property RegistrationDate() As Date
    End Class
End Namespace

How to Create a Custom Drop-down Filter

To create a custom drop-down filter:

• Set the ColumnBase.FilterPopupMode property to FilterPopupMode.Custom / FilterPopupMode.ExcelSmart.

• Create a template that represents the drop-down filter and assign it to the ColumnBase.CustomColumnFilterPopupTemplate property (see Example 1).

  You can define a filter element with the PART_FilterElement name as a custom data template (see Example 2).

Example 1

The following code sample demonstrates how to create a custom drop-down filter for the Index column:

View Example: How to Create a Custom Filter Dropdown

Window1.xaml

<Window x:Class="DXGrid_CustomFilterPopup.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
    xmlns:local="clr-namespace:DXGrid_CustomFilterPopup" 
    Title="Window1" Height="300" Width="423">

    <Grid>
        <dxg:GridControl x:Name="grid">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="Index" FilterPopupMode="Custom">
                    <dxg:GridColumn.CustomColumnFilterPopupTemplate>
                        <DataTemplate>
                            <StackPanel>
                            <Label Content="Minimum Index:" Margin="3" />
                            <Slider Minimum="1" Maximum="99" Width="200" Margin="3" 
                                    Value="{Binding Path=CustomColumnFilter, RelativeSource={RelativeSource TemplatedParent}, 
                                            Converter={local:IntToCriteriaOperatorConverter}}" />
                            </StackPanel>
                        </DataTemplate>
                    </dxg:GridColumn.CustomColumnFilterPopupTemplate>
                </dxg:GridColumn>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True" />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>

Window1.xaml.cs

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Markup;
using DevExpress.Data.Filtering;

namespace DXGrid_CustomFilterPopup {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
            grid.ItemsSource = GridData.GetData();
        }
    }
    public class GridData {
        static public List<DataObject>  GetData() {
            List<DataObject> data = new List<DataObject>();
            for (int i = 0; i < 100; i++)
                data.Add(new DataObject() { Index = i });
            return data;
        }
    }
    public class DataObject {
        public int Index { get; set; }
    }
    public class IntToCriteriaOperatorConverter : MarkupExtension, IValueConverter {
        public override object ProvideValue(IServiceProvider serviceProvider) {
            return this;
        }
        #region IValueConverter Members
        object IValueConverter.Convert(object value, Type targetType, 
                object parameter, System.Globalization.CultureInfo culture) {
            BinaryOperator op = value as BinaryOperator;
            if (object.ReferenceEquals(op, null))
                return null;
            OperandValue operandValue = op.RightOperand as OperandValue;
            return operandValue.Value;
        }
        object IValueConverter.ConvertBack(object value, Type targetType,
                object parameter, System.Globalization.CultureInfo culture) {
            return new BinaryOperator("Index", Convert.ToInt32(value), BinaryOperatorType.Greater);
        }
        #endregion
    }
}

Window1.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Windows
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Markup
Imports DevExpress.Data.Filtering

Namespace DXGrid_CustomFilterPopup
    Partial Public Class Window1
        Inherits Window
        Public Sub New()
            InitializeComponent()
            grid.ItemsSource = GridData.GetData()
        End Sub
    End Class
    Public Class GridData
        Public Shared Function GetData() As List(Of DataObject)
            Dim data As New List(Of DataObject)()
            For i As Integer = 0 To 99
                data.Add(New DataObject() With {.Index = i})
            Next i
            Return data
        End Function
    End Class
    Public Class DataObject
        Private privateIndex As Integer
        Public Property Index() As Integer
            Get
                Return privateIndex
            End Get
            Set(ByVal value As Integer)
                privateIndex = value
            End Set
        End Property
    End Class
    Public Class IntToCriteriaOperatorConverter
        Inherits MarkupExtension
        Implements IValueConverter
        Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object
            Return Me
        End Function
        #Region "IValueConverter Members"
        Private Function IValueConverter_Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, 
                ByVal culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.Convert
            Dim op As BinaryOperator = TryCast(value, BinaryOperator)
            If Object.ReferenceEquals(op, Nothing) Then
                Return Nothing
            End If
            Dim operandValue As OperandValue = TryCast(op.RightOperand, OperandValue)
            Return operandValue.Value
        End Function
        Private Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, 
                ByVal culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
            Return New BinaryOperator("Index", Convert.ToInt32(value), BinaryOperatorType.Greater)
        End Function
        #End Region
    End Class
End Namespace

Example 2

Run Demo: Custom Filter Popup Content

The following code sample uses the RangeFilterElement as a custom data template:

Xaml

<dxg:GridControl x:Name="grid" ItemsSource="...">
    <dxg:GridControl.Columns>
        <!-- -->
        <dxg:GridColumn FieldName="Quantity">
            <dxg:GridColumn.CustomColumnFilterPopupTemplate>
                <DataTemplate>
                    <dxfui:RangeFilterElement x:Name="PART_FilterElement"/>
                </DataTemplate>
            </dxg:GridColumn.CustomColumnFilterPopupTemplate>
        </dxg:GridColumn>
        <!-- -->
    </dxg:GridControl.Columns>
    <dxg:GridControl.View>
        <dxg:TableView ColumnFilterPopupMode="ExcelSmart" />
    </dxg:GridControl.View>
</dxg:GridControl>