Step 3: Enable Filter Operations

• Aug 17, 2022
• 4 minutes to read

This step describes how to allow users to filter rows:

• Implement filter operations in the virtual source.
• Enable these operations in the GridControl.

View Example: Data Grid - Bind to InfiniteAsyncSource

Filter Types

The Issues Service can fetch rows:

• With a specified Priority.
• Over a period of time (between CreatedFrom and CreatedTo).
• With the maximum number of Votes.

C#

public class IssueFilter {  
    public Priority? Priority { get; private set; }
    public DateTime? CreatedFrom { get; private set; }
    public DateTime? CreatedTo { get; private set; }
    public int? MinVotes { get; private set; }
}

The Step 1: Fetch Data topic demonstrates how to fetch rows without filter conditions:

C#

public MainPage() {
    // ... 
    source.FetchRows += (o, e) => {
        e.Result = FetchRowsAsync(e);
    };
}
static async Task<FetchRowsResult> FetchRowsAsync(FetchRowsAsyncEventArgs e) {
    var take = 30;
    var issues = await IssuesService.GetIssuesAsync(
        skip: e.Skip,
        take: take,
        sortOrder: IssueSortOrder.Default,
        filter: null);
    return new FetchRowsResult(issues, hasMoreRows: issues.Length == take);
}

Allow Users to Filter Rows

1. Implement filter operations in the virtual source:

   • Use the FetchEventArgsBase.Filter property to get the GridControl‘s filter.
   • Parse this filter and return an IssueFilter (the Issues Service‘s filter). The InfiniteAsyncSource.FetchRows event handler uses this filter when the GridControl fetches rows.
   C#

   static IssueFilter MakeIssueFilter(CriteriaOperator filter) {
       return filter.Match(
           binary: (propertyName, value, type) => {
               if (propertyName == "Votes" && type == BinaryOperatorType.GreaterOrEqual)
                   return new IssueFilter(minVotes: (int)value);
   
               if (propertyName == "Priority" && type == BinaryOperatorType.Equal)
                   return new IssueFilter(priority: (Priority)value);
   
               if (propertyName == "Created") {
                   if (type == BinaryOperatorType.GreaterOrEqual)
                       return new IssueFilter(createdFrom: (DateTime)value);
                   if (type == BinaryOperatorType.Less)
                       return new IssueFilter(createdTo: (DateTime)value);
               }
   
               throw new InvalidOperationException();
           },
           and: filters => {
               return new IssueFilter(
                   createdFrom: filters.Select(x => x.CreatedFrom).SingleOrDefault(x => x != null),
                   createdTo: filters.Select(x => x.CreatedTo).SingleOrDefault(x => x != null),
                   minVotes: filters.Select(x => x.MinVotes).SingleOrDefault(x => x != null),
                   priority: filters.Select(x => x.Priority).SingleOrDefault(x => x != null)
               );
           },
           @null: default(IssueFilter)
       );
   }
   
   static async Task<FetchRowsResult> FetchRowsAsync(FetchRowsAsyncEventArgs e) {
       IssueSortOrder sortOrder = GetIssueSortOrder(e.SortOrder);
       IssueFilter filter = MakeIssueFilter(e.Filter);
       var take = 30;
       var issues = await IssuesService.GetIssuesAsync(
           skip: e.Skip,
           take: take,
           sortOrder: sortOrder,
           filter: filter);
       return new FetchRowsResult(issues, hasMoreRows: issues.Length == take);
   }
   

   Tip

   The code sample above uses the DevExpress.WinUI.Grid.FilterCriteriaMatchHelper.Match method that allows you to parse filter criteria created by the GridControl.

2. Get a list of priorities to show it in the Priority column’s drop-down filter:

   

   • Handle the InfiniteAsyncSource.GetUniqueValues event.
   • Use the PropertyName property to get the field name for which the GridControl collects unique values.
   • Get a list of unique values and assign it to the Result property.
   C#

   public MainPage() {
       // ...
   
       source.GetUniqueValues += (o, e) => {
           if (e.PropertyName == "Priority") {
               var values = Enum.GetValues(typeof(Priority)).Cast<object>().ToArray();
               e.Result = Task.FromResult(values);
           }
       };
   }
   

   If a service or database includes a method that obtains unique values, use this method in the GetUniqueValues event handler.

3. Allow users to filter GridControl rows by the Priority column:

   • Set the ColumnBase.AllowFiltering property to true.
   • Set the ColumnBase.AllowedBinaryFilters property to Equals to allow users to show rows with the specified priority.
   • Set the ColumnBase.FilterPopupMode property to List to enable a drop-down filter that allows users to select one item at a time.
   XAML

   <dxg:GridTextColumn FieldName="Priority" AllowFiltering="True" AllowedBinaryFilters="Equals" FilterPopupMode="List"/>
   

4. Allow users to filter GridControl rows by the Votes column:

   • Set the ColumnBase.AllowFiltering property to true.
   • Set the ColumnBase.AllowedBinaryFilters property to GreaterOrEqual to allow users to show rows with votes that are greater than or equal to an input value.
   • Set the ColumnBase.FilterPopupMode property to Excel to enable a drop-down filter that allows users to create the GreaterOrEqual criteria.
   XAML

   <dxg:GridTextColumn FieldName="Votes" AllowFiltering="True" AllowedBinaryFilters="GreaterOrEqual" FilterPopupMode="Excel"/>
   

   

5. Allow users to filter GridControl rows by the Created column:

   • Set the ColumnBase.AllowFiltering property to true.
   • Set the ColumnBase.FilterPopupMode property to DateSmart to enable a calendar that allows users to specify dates.
   XAML

   <dxg:GridDateColumn FieldName="Created" AllowFiltering="True" FilterPopupMode="DateSmart"/>
   

   

Continue or Review

• Proceed to Step 4 - Display Summaries.
• Review Step 2 - Enable Sort Operations.