Tutorial: Filter Editor

  • 5 minutes to read

This walkthrough is a transcript of the Filter Editor video available on the DevExpress YouTube Channel.

The grid control ships with a built-in Filter Editor dialog that allows end-users to build filter criteria of any complexity using either the tree-like filter builder interface or a text editor with hints much like Visual Studio IntelliSense. In this tutorial, you will learn how end-users can invoke this dialog, what options affect its availability and how you can invoke it from code and customize it before it's displayed.

Invoking the Filter Editor and Creating Simple Filter Criteria

To invoke the Filter Editor, right-click any column header and select Filter Editor… in the context menu.

GridView_Filtering_FilterEditorMenuItem

By default, the Filter Editor displays filter criteria as a tree where individual nodes represent simple filter conditions. The root node is the logical operator combining all conditions. Any filter condition consists of three parts: a column name, criteria operator and operand value. If the grid's data is not filtered, the editor contains one incomplete filter condition for the clicked column.

GridView_Filtering_InitialFilterEditorContent

Click the value box and select Medium in the dropdown list.

GridView_Filtering_FilterEditorWithOneCondition

Click OK to close the editor and apply changes. As a result, the grid displays only records with a priority set to Medium. Now you can invoke the Filter Editor using the Edit Filter button within the Filter Panel.

GridView_Filtering_InvokingFilterEditorViaEditFilterButton

To add a new filter condition, click the plus button (FilterEditor_EU_AddButton) next to the root node. This can also be done by clicking the logical operator and selecting Add Condition.

GridView_Filtering_FilterEditorAddConditionMenuItem

Select Name in the list of available columns. Then, use the Contains comparison operator and enter the 'vendor' string in the value box. Click Apply to filter data without closing the editor.

GridView_Filtering_FilterEditorWithTwoConditions

The grid now displays records with medium priority and names containing 'vendor' in them.

GridView_Filtering_FilterEditorFilteringResult

Deleting Filter Conditions

Now delete all filter conditions by clicking their FilterEditor_EU_DeleteButton buttons or by selecting Clear All in the logical operator's menu.

GridView_Filtering_FilterEditorClearAllMenuItem

Constructing Complex Filter Criteria

You can now create a more complex filter criteria. To create a new condition group, click the root logical operator and select Add Group.

GridView_Filtering_FilterEditorAddGroupMenuItem

Change the created logical operator to OR.

GridView_Filtering_FilterEditorChangingLogicalOperator

Create two new conditions within this group. These conditions will select records that have a High priority or a status set to New. In the same manner, create one more OR condition group with two conditions. These conditions will select records with Created Date between January 1 and today or those where Fixed Date Is greater than April 1.

GridView_Filtering_FilterEditorWithComplexCriteria

Click OK to filter data using the created criterion. You'll see the entire filter condition displayed in the filter panel.

GridView_Filtering_FilterEditorComplexCriteriaResult

Changing the Filter Editor Style

Now try a different filter condition editor UI. At design time, access the View's settings, expand ColumnView.OptionsFilter and set the ColumnViewOptionsFilter.DefaultFilterEditorView property to FilterEditorViewMode.Text.

GridView_Filtering_DefaultFilterEditorViewProperty

Run the application and invoke the Filter Editor. Now you can type a filter string directly into the embedded Rich Text Editor. Dropdown lists of operators and field names are automatically invoked when typing a filter, much like the Visual Studio IntelliSense feature.

GridView_Filtering_FilterEditorTextStyle

Locate the same property and set the editing mode to FilterEditorViewMode.VisualAndText. The Filter Editor will display both the Visual and Text editors in their own tabs.

GridView_Filtering_FilterEditorVisualAndTextStyle

Preventing End-Users from Invoking the Filter Editor

If you don't want end-users to invoke the dialog from the column header menu, set the ColumnViewOptionsFilter.AllowFilterEditor property to false.

GridView_Filtering_AllowFilterEditorProperty

Note that the filter panel's Edit Filter button has also become invisible.

Invoking and Customizing the Filter Editor in Code

Return to design-time and see how the Filter Editor can be invoked and customized in code.

In the Click event handler for the Show Filter Editor button, call the View's ColumnView.ShowFilterEditor method to invoke the Filter Editor in visual style.


private void btn_ShowFilterEditor_ItemClick(object sender, ItemClickEventArgs e) {
    gridView.OptionsFilter.DefaultFilterEditorView = DevExpress.XtraEditors.FilterEditorViewMode.Visual;
    gridView.ShowFilterEditor(null);
}

Additionally, handle the View's ColumnView.FilterEditorCreated event, which is raised when the Filter Editor is about to be displayed. In the event handler, customize the value color using the FilterControl.AppearanceValueColor property of the event's FilterControlEventArgs.FilterControl parameter. Enable the FilterControl.ShowOperandTypeIcon option to allow values of one column to be compared to values in other columns or to predefined constants.


private void gridView_FilterEditorCreated(object sender, DevExpress.XtraGrid.Views.Base.FilterControlEventArgs e) {
    e.FilterControl.AppearanceValueColor = Color.Red;
    e.FilterControl.ShowOperandTypeIcon = true;
}

Run the application and click the Show Filter Editor button. In the invoked editor, add a new condition and then click the operand type icon that's now displayed on the left of the remove button.

GridView_Filtering_FilterEditorOperandTypeIcon

Click the value box, select Date and time constants and choose This year.

GridView_Filtering_FilterEditorDateTimeConstants

Change the comparison operator to Is less than. Add another condition that selects records where Priority is Medium. Note that the value is painted using the red color as specified in the event handler.

GridView_Filtering_FilterEditorRedValueColor

See Also