FilterNumericRangeItem Class

A filter item that allows you to filter data control items by numeric range values.

Assembly: DevExpress.Maui.Editors.dll

NuGet Package: DevExpress.Maui.Editors

Declaration

public class FilterNumericRangeItem :
    FilterNumericRangeItemBase

Remarks

The image below shows a sample numeric-range filter item:

DevExpress Filtering UI for MAUI - Range editor

To use a FilterNumericRangeItem in your filtering UI, bind its Context property to the data control’s FilteringContext (DataGridView.FilteringContext or DXCollectionView.FilteringContext). Then specify the FilterNumericRangeItem’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:FilterNumericRangeItem Context="{Binding}" Text="Price" FieldName="Price2"/>
             <!--...-->
</ContentPage>

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

Use the Max and Min properties to specify the maximum and minimum values that users can specify in the filter. If values of these properties are null, they are set to maximum/minimum values that are available in the bound data source.

You can also replace the default editor with a custom editor. To do so, specify the FilterNumericRangeItem’s FilterModelTemplate property. Use the FilterNumericRangeItem’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 }