ColumnBase.CustomColumnFilterPopupTemplate Property

Gets or sets the template that defines the presentation of the column’s Drop-down Filter. This is a dependency property.

Namespace: DevExpress.Xpf.Grid

Assembly: DevExpress.Xpf.Grid.v20.2.Core.dll

NuGet Packages: DevExpress.WindowsDesktop.Wpf.Grid.Core, DevExpress.Wpf.Grid.Core

Declaration

C#

public DataTemplate CustomColumnFilterPopupTemplate { get; set; }

VB.NET

Public Property CustomColumnFilterPopupTemplate As DataTemplate

Property Value

Type	Description
DataTemplate	A DataTemplate object that defines the presentation of a custom column filter.

Remarks

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> 

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the CustomColumnFilterPopupTemplate property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

XAML

grid-how-to-change-a-columns-filter-popup-using-customcolumnfilterpopuptemplate-e1794/CS/DateRangeFilterCS/Window1.xaml#L25

<dxg:GridColumn FieldName="Date1" FilterPopupMode="Custom"
            CustomColumnFilterPopupTemplate="{StaticResource columnFilterPopupTemplate}" />
<dxg:GridColumn FieldName="Date2" FilterPopupMode="Custom"

wpf-data-grid-create-custom-drop-down-filter/CS/DXGrid_CustomFilterPopup/Window1.xaml#L6

<dxg:GridColumn FieldName="Index" FilterPopupMode="Custom">
    <dxg:GridColumn.CustomColumnFilterPopupTemplate>
        <DataTemplate>

how-to-show-images-in-a-column-filter-drop-down-window-e3941/CS/Default MVVM/MainWindow.xaml#L18

<dxg:GridColumn FieldName="Number" FilterPopupMode="Custom">
    <dxg:GridColumn.CustomColumnFilterPopupTemplate>
        <DataTemplate>