TemplateColumn.FilterDisplayTemplate Property

Gets or sets a template that specifies which custom layout to display in a column’s filter within the auto-filter row. This is a bindable property.

Namespace: DevExpress.Maui.DataGrid

Assembly: DevExpress.Maui.DataGrid.dll

NuGet Package: DevExpress.Maui.DataGrid

Declaration

public DataTemplate FilterDisplayTemplate { get; set; }

Property Value

Type	Description
DataTemplate	The template.

Remarks

The CellData class specifies the binding context for this template.

Example

The following example shows how to filter template column values by a combo-box value. To do this, the example implements a custom combo-box editor used to apply filters, and customizes the appearance of the selected filter value after a filter is applied:

The example uses the following API members to replicate the grid as in the image above:

• DisplayTemplate - Specifies TemplateColumn value appearance.
• FilterDisplayTemplate - Specifies a template that configures the filter value’s appearance in the auto filter row.
• FilterEditTemplate - Specifies a custom editor used to filter column values in the auto filter row.

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid"
             xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors"
             xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="True"
             xmlns:local="clr-namespace:DataGridExample"
             x:Class="DataGridExample.MainPage">
    <ContentPage.Resources>
        <local:StatusToBrushConverter x:Key="converter"/>
        <x:Array Type="{x:Type local:State}" x:Key="StateItems">
            <local:State>Green</local:State>
            <local:State>Yellow</local:State>
            <local:State>Red</local:State>
        </x:Array>
        <DataTemplate x:Key="StatusTemplate">
            <Grid>
                <Ellipse HeightRequest="32" WidthRequest="32" Margin="2"
                         HorizontalOptions="Center" VerticalOptions="Center"
                         Fill="{Binding Value,Converter={StaticResource converter}}" 
                         Stroke="DarkGray" StrokeThickness="1"/>
            </Grid>
        </DataTemplate>
    </ContentPage.Resources>
    <Grid>
        <dxg:DataGridView ItemsSource="{Binding Items}"
                          ShowAutoFilterRow="True" ShowFilterIcon="True">
            <dxg:DataGridView.Columns>
                <dxg:TextColumn FieldName="Name"/>
                <dxg:TemplateColumn FieldName="Status" 
                                    DisplayTemplate="{StaticResource StatusTemplate}"
                                    FilterDisplayTemplate="{StaticResource StatusTemplate}" >
                    <dxg:TemplateColumn.FilterEditTemplate>
                        <DataTemplate>
                            <Grid>
                                <dxe:ComboBoxEdit ItemsSource="{StaticResource StateItems}"
                                                  UseItemTemplateAsDisplayItemTemplate="True"
                                                  BorderThickness="0"
                                                  ClearIconVisibility="Always" 
                                                  SelectedItem="{Binding Value}" >
                                    <dxe:ComboBoxEdit.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <Ellipse HeightRequest="32" WidthRequest="32" Margin="2"
                                                         HorizontalOptions="Center" VerticalOptions="Center"
                                                         Fill="{Binding Path=., Converter={StaticResource converter}}"
                                                         Stroke="DarkGray" StrokeThickness="1"/>
                                            </Grid>
                                        </DataTemplate>
                                    </dxe:ComboBoxEdit.ItemTemplate>
                                </dxe:ComboBoxEdit>
                            </Grid>
                        </DataTemplate>
                    </dxg:TemplateColumn.FilterEditTemplate>
                </dxg:TemplateColumn>
            </dxg:DataGridView.Columns>
        </dxg:DataGridView>
    </Grid>
</ContentPage>

C#

using Microsoft.Maui.Controls;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System;
using Microsoft.Maui.Graphics;

namespace DataGridExample {
    public partial class MainPage : ContentPage {
        public MainPage() {
            InitializeComponent();
            this.BindingContext = new MainViewModel();
        }
    }
    public class MainViewModel {
        protected ObservableCollection<State> _StateItems;
        public ObservableCollection<State> StateItems {
            get {
                if (this._StateItems == null) {
                    this._StateItems = new ObservableCollection<State> {
                        State.Green,
                        State.Yellow,
                        State.Red
                    };
                }
                return this._StateItems;
            }
        }
        public MainViewModel() {
            Random r = new Random();
            int i = -1;
            while (++i < 40) {
                var item = new SomeItem();
                item.Name = $"Item {i}";
                item.Status = (State)r.Next(3);
                Items.Add(item);
            }
        }
        protected ObservableCollection<SomeItem> _Items;
        public ObservableCollection<SomeItem> Items {
            get {
                if (this._Items == null) {
                    this._Items = new ObservableCollection<SomeItem>();
                }
                return this._Items;
            }
        }
    }
    public class SomeItem : INotifyPropertyChanged {
        protected string _Name;
        public string Name {
            get {
                return this._Name;
            }
            set {
                if (this._Name != value) {
                    this._Name = value;
                    this.OnPropertyChanged("Name");
                }
            }
        }
        protected State _Status;
        public State Status {
            get {
                return this._Status;
            }
            set {
                if (this._Status != value) {
                    this._Status = value;
                    this.OnPropertyChanged("Status");
                }
            }
        }
        public void OnPropertyChanged(string info) {
            if (this.PropertyChanged != null) {
                this.PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }
    public enum State {
        Green,
        Yellow,
        Red
    }
    public class StatusToBrushConverter : IValueConverter {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
            if (value is State status) {
                switch (status) {
                    case State.Green:
                        return new SolidColorBrush(Colors.Green);
                    case State.Yellow:
                        return new SolidColorBrush(Colors.Yellow);
                    case State.Red:
                        return new SolidColorBrush(Colors.Red);
                    default:
                        break;
                }
            };
            return null;
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
            throw new NotImplementedException();
        }
    }
}