FilterCheckedChipGroupItem Class

A filter item that allows you to select multiple options from a set of chips.

Assembly: DevExpress.Maui.Editors.dll

NuGet Package: DevExpress.Maui.Editors

Declaration

public class FilterCheckedChipGroupItem :
    FilterCheckedChipGroupItemBase

Remarks

The image below shows a sample filter chip group in which a user can select multiple chips:

DevExpress Filtering UI for MAUI - Checked chip group

To use a FilterCheckedChipGroupItem in your filtering UI, bind its Context property to the data control’s FilteringContext (DataGridView.FilteringContext or DXCollectionView.FilteringContext). Then specify the FilterCheckedChipGroupItem’s FieldName property to set by which data source property values the data control should filter its items:

XAML

<ContentPage ...
             xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors">
             <!--...-->
                <dxe:FilterCheckedChipGroupItem Context="{Binding}" 
                                                    Text="Property Type" 
                                                    FieldName="Type" 
                                                    CustomDisplayText="OnCustomDisplayText"/>
             <!--...-->
</ContentPage>

FilterPage FilterPage => filterPage ??= new FilterPage() { BindingContext = dataControl.FilteringContext };

EnumToDescriptionConverter EnumToDescriptionConverter { get; } = new EnumToDescriptionConverter();

void OnCustomDisplayText(object sender, FilterElementCustomDisplayTextEventArgs e) {
    e.DisplayText = EnumToDescriptionConverter.Convert(e.Value).ToString();
}

public class EnumToDescriptionConverter : IMarkupExtension, IValueConverter {
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
        return Convert(value);
    }

    public object Convert(object value) {
        var enumValue = (Enum)value;
        var member = enumValue.GetType().GetMember(enumValue.ToString());
        var attributes = member[0].GetCustomAttributes(typeof(DescriptionAttribute), false);
        return (attributes.Length > 0) ? ((DescriptionAttribute)attributes[0]).Description : null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
        throw new NotSupportedException();
    }

    public object ProvideValue(IServiceProvider serviceProvider) {
        return this;
    }
}

You can also replace the default editor with a custom editor. To do so, specify the FilterCheckedChipGroupFormItem’s FilterModelTemplate property. Use the FilterCheckedChipGroupItem’s FilterModel property to obtain the binding context for the template.

For more information on how to implement a Filtering UI for DataGridView and DXCollectionView, refer to the following sections:

Example

The following example shows how to design a filtering UI for a DataGridView. Populate a view with filter items and set their Context property to the data grid’s FilteringContext. For each filter item, specify the FilterElementBase.FieldName property so that items can obtain their values from the corresponding data fields.

DevExpress Filtering UI -- Filter Grid

FilterPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors"
             x:Class="DXFilteringApp.FilterPage"
             Title="FilterPage">
    <Grid>
        <ScrollView>
            <VerticalStackLayout>
                <!-- The BindingContext contains the DataGridView.FilteringContext property value -->
                <dxe:FilterCheckedChipGroupItem Context="{Binding}" FieldName="PackagingType"/>
                <dxe:FilterNumericRangeItem Context="{Binding}" Text="Quantity" FieldName="Quantity"/>
                <dxe:FilterNumericRangeItem Context="{Binding}" Text="Unit price" FieldName="Product.UnitPrice"/>
                <dxe:FilterDateRangeItem Context="{Binding}" Text="Order Date" FieldName="Date"/>
                <dxe:FilterCheckItem Context="{Binding}" Text="Fast Delivery" FieldName="FastDelivery" />
                <Button Clicked="Button_Clicked" Text="Show filtered grid data"/>
            </VerticalStackLayout>
        </ScrollView>
    </Grid>
</ContentPage>

FilterPage.xaml.cs

using DevExpress.Maui.Editors;

namespace DXFilteringApp {
    public partial class FilterPage : ContentPage {
        public FilterPage() {
            InitializeComponent();
        }
        private async void Button_Clicked(object sender, EventArgs e) {
            await Navigation.PopModalAsync();
        }
    }
}

MainPage.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:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="true"
             x:Class= "DXFilteringApp.MainPage">
    <ContentPage.Content>
        <Grid RowDefinitions="50,*">
            <Button Clicked="OnFilterClicked" Text="Configure filters" Grid.Row="0"/>
            <ScrollView Grid.Row="1">
                <dxg:DataGridView x:Name="grid" SelectionMode="None"
                              ItemsSource="{Binding Orders}">
                    <dxg:TextColumn FieldName="Product.Name" HeaderFontSize="10"/>
                    <dxg:NumberColumn FieldName="Product.UnitPrice" HeaderFontSize="10"/>
                    <dxg:ComboBoxColumn FieldName="PackagingType" HeaderFontSize="10"/>
                    <dxg:NumberColumn FieldName="Quantity" HeaderFontSize="10"/>
                    <dxg:DateColumn FieldName="Date" HeaderFontSize="10"/>
                    <dxg:CheckBoxColumn FieldName="FastDelivery" HeaderFontSize="10"/>
                </dxg:DataGridView>
            </ScrollView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

MainPage.xaml.cs

namespace DXFilteringApp;
public partial class MainPage : ContentPage {
    FilterPage filterPage;
    FilterPage FilterPage => filterPage ??= new FilterPage() { BindingContext = grid.FilteringContext };
    public MainPage() {
        InitializeComponent();
        BindingContext = new TestOrderRepository();
    }
    async void OnFilterClicked(object sender, EventArgs e) {
        await OpenFilterPage();
    }
    Task OpenFilterPage() {
        return Navigation.PushModalAsync(FilterPage);
    }
}

Show data source code

using System.ComponentModel;
namespace DXFilteringApp;
public abstract class OrderRepository {
  readonly BindingList<Order> orders;
  public OrderRepository() {
      this.orders = new BindingList<Order>();
  }
  public BindingList<Order> Orders {
      get { return orders; }
  }
}
public class TestOrderRepository : OrderRepository {
  const int orderCount = 100;
  readonly List<Product> products;
  readonly Random random;
  public TestOrderRepository() : base() {
      this.random = new Random((int)DateTime.Now.Ticks);
      this.products = new List<Product>();
      GenerateProducts();
      for (int i = 0; i < orderCount; i++)
          Orders.Add(GenerateOrder(i));
  }
  Order GenerateOrder(int number) {
      Order order = new Order(new DateTime(2022, 9, 1).AddDays(random.Next(0, 60)),
      number % 3 == 0, RandomItem<Product>(products), random.Next(1, 100),
      (PackagingType)random.Next(Enum.GetNames(typeof(PackagingType)).Length));
      return order;
  }
  T RandomItem<T>(IList<T> list) {
      int index = (int)(random.NextDouble() * 0.99 * (list.Count));
      return list[index];
  }
  void GenerateProducts() {
      products.Add(new Product("Tofu", 50));
      products.Add(new Product("Chocolade", 34));
      products.Add(new Product("Ikura", 70));
      products.Add(new Product("Chai", 3));
      products.Add(new Product("Boston Crab Meat", 36));
      products.Add(new Product("Ravioli Angelo", 18));
      products.Add(new Product("Ipon Coffee", 10));
      products.Add(new Product("Queso Cabrales", 25));
  }
}
public class Order : ModelObject {
  DateTime date;
  bool fastDelivery;
  Product product;
  int quantity;
  PackagingType packagingType;
  public Order() {
      this.date = DateTime.Today;
      this.fastDelivery = false;
      this.product = new Product("", 0);
      this.quantity = 0;
  }
  public Order(DateTime date, bool fastDelivery, Product product, int quantity, PackagingType packagingType) {
      this.date = date;
      this.fastDelivery = fastDelivery;
      this.product = product;
      this.quantity = quantity;
      this.packagingType = packagingType;
  }
  public DateTime Date {
      get { return date; }
      set {
          if (date != value) {
              date = value;
              RaisePropertyChanged("Date");
          }
      }
  }
  public bool FastDelivery {
      get { return fastDelivery; }
      set {
          if (fastDelivery != value) {
              fastDelivery = value;
              RaisePropertyChanged("FastDelivery");
          }
      }
  }
  public PackagingType PackagingType {
      get { return packagingType; }
      set {
          if (packagingType != value) {
              packagingType = value;
              RaisePropertyChanged("PackagingType");
          }
      }
  }
  public Product Product {
      get { return product; }
      set {
          if (product != value) {
              product = value;
              RaisePropertyChanged("Product");
          }
      }
  }
  public int Quantity {
      get { return quantity; }
      set {
          if (quantity != value) {
              quantity = value;
              RaisePropertyChanged("Quantity");
          }
      }
  }
}
public class ModelObject : INotifyPropertyChanged {
  public event PropertyChangedEventHandler PropertyChanged;
  protected void RaisePropertyChanged(string name) {
      if (PropertyChanged != null)
          PropertyChanged(this, new PropertyChangedEventArgs(name));
  }
}
public class Product : ModelObject {
  string name;
  int unitPrice;
  public Product(string name, int unitPrice) {
      this.name = name;
      this.unitPrice = unitPrice;
  }
  public string Name {
      get { return name; }
      set { name = value; }
  }
  public int UnitPrice {
      get { return unitPrice; }
      set { unitPrice = value; }
  }
}
public enum PackagingType { CardboardBox, CorrugatedBox, ClingFilm, PlasticBox, Chipboard }