Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

TemplateColumn.FilterEditTemplate Property

Gets or sets a template that specifies which custom layout should edit the column filter in the auto-filter row. This is a bindable property.

Namespace: DevExpress.Maui.DataGrid

Assembly: DevExpress.Maui.DataGrid.dll

NuGet Package: DevExpress.Maui.DataGrid

#Declaration

C#
public DataTemplate FilterEditTemplate { 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:

DevExpress DataGridView for .NET MAUI

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.
<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>
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();
        }
    }
}
See Also