Step 3: Enable Filter Operations
- 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.
#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.
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:
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
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.
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.
Win method that allows you to parse filter criteria created by the GridUI. Grid. Filter Criteria Match Helper. Match Control .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.
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.
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.
<dxg:GridTextColumn FieldName="Priority" AllowFiltering="True" AllowedBinaryFilters="Equals" FilterPopupMode="List"/>
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.
<dxg:GridTextColumn FieldName="Votes" AllowFiltering="True" AllowedBinaryFilters="GreaterOrEqual" FilterPopupMode="Excel"/>
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.
<dxg:GridDateColumn FieldName="Created" AllowFiltering="True" FilterPopupMode="DateSmart"/>
#Continue or Review
- Proceed to Step 4 - Display Summaries.
- Review Step 2 - Enable Sort Operations.