Tutorial: Excel-Style Custom Filter Dialog
- 4 minutes to read
This walkthrough is a transcript of the Excel-Style Filter Dialog video available on the DevExpress YouTube Channel.
In this tutorial, you will learn how to use the Excel-Style Filter Dialog available to end-users by default, how to switch to a version that allows you to compare values from one field to values in another, how to manually invoke and customize these dialogs in code.
Standard Custom Filter Dialog
To invoke the Excel-Style Filter Dialog for a column, click this column’s filter button and select (Custom) in the dropdown.
The dialog allows end-users to create criteria that consist of one or two conditions combined by AND or OR logical operators. Change the comparison operator of the first condition to Is greater than. In the dialog to the right, enter the value 10. Leave the AND logical operator selected. For the second condition, choose Is less than and enter the value 30. Click OK to apply the created filter condition.
As a result, the grid displays records whose unit price is between 10 and 30 dollars.
Advanced Custom Filter Dialog
Close the application. Select the View, expand its ColumnView.OptionsFilter property and enable the ColumnViewOptionsFilter.UseNewCustomFilterDialog option.
Run the application to see the change. Now when you select (Custom) in a column’s filter dropdown, a different version of the Custom Filter Dialog is used. This dialog additionally provides the capability to compare current column values to values in another column. Activate this mode for the first condition by selecting the Field check box, and choose the Discount Price column in the dropdown list. Then, change the comparison operator to Does not equal. For the second condition, choose Is less than and enter the value 20. Click OK to show only those records that have a discount assigned while the unit price is less than 20.
Invoking and Customizing Filter Dialogs in Code
The next step is to see how the Custom Filter Dialogs can be invoked and customized in code.
To invoke the Custom Filter Dialog for the Category column in the Click event handler for the Show Custom Filter Editor button, call the View’s ColumnView.ShowCustomFilterDialog method and pass the Category column as a parameter.
private void btn_ShowCustomFilterDialog_ItemClick(object sender, ItemClickEventArgs e) {
gridView.ShowCustomFilterDialog(colCategory);
}
Filter Dialogs can be customized in the View’s ColumnView.CustomFilterDialog event, which is raised when an dialog is about to be displayed. Write a handler for this event that will suppress the default dialog for the Unit Price column and then will apply a custom filter condition. The event’s CustomFilterDialogEventArgs.Column parameter identifies the column to be filtered. Specify the desired filter condition and text to be displayed within the filter panel, and create a new ColumnFilterInfo object with these settings. Then, assign the new filter item to the event’s CustomFilterDialogEventArgs.FilterInfo parameter. Finally, set the CustomFilterDialogEventArgs.Handled parameter to true to prevent the default Filter Dialog from being invoked after event execution.
private void gridView_CustomFilterDialog(object sender, DevExpress.XtraGrid.Views.Grid.CustomFilterDialogEventArgs e) {
if (e.Column.FieldName != "UnitPrice") return;
string filterSting = "[UnitPrice] > 10 AND [UnitPrice] < 30";
string displayText = "[UnitPrice] > $10.00 AND [UnitPrice] < $30.00";
ColumnFilterInfo columnFilter = new ColumnFilterInfo(filterSting, displayText);
e.FilterInfo = columnFilter;
e.Handled = true;
}
Run the application and click the Show Custom Filter Editor button. A filter dialog will be displayed for the Category column. In the invoked dialog, specify two conditions to display records from the Beverages and Confections categories. Now invoke the Unit Price column’s filter dropdown and select (Custom). This selects records whose unit price is between 10 and 30.
