How to: Create a Custom Filter Dropdown

• Apr 15, 2018
• 3 minutes to read

To create a custom drop-down filter:

• Set the column’s ColumnBase.FilterPopupMode property to FilterPopupMode.Custom.
• Create a template representing the required drop-down filter and assign it to the ColumnBase.CustomColumnFilterPopupTemplate property.

This example demonstrates how to create a custom drop-down filter for the Index column.

The image below shows the result:

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-custom-filter-dropdown-e1616.

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 (C#)

<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.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