The DevExpress MVC Grid View implements the built-in Filter Builder. You can use it to allow end-users to visually build complex filter criteria with an unlimited number of filter conditions, combined by logical operators.
End-users can open the Filter Builder popup window by clicking the image or filter expression link within a specific Filter Bar that can be displayed at the grid bottom. By default, the Filter Bar isn't displayed. You can use the Settings.ShowFilterBar property to control its display mode (Hidden, Visible, Auto).
The Filter Bar displays the following elements:
- Filter Check Box - Enables or temporarily disables the current filter.
- Filter Image - Click this image to invoke the Filter Builder.
- Filter Expression Link - A string representation of the currently applied filter criteria. A click on this link invokes the Filter Builder.
- Clear Command - Clears the current filter.
When the Filter Builder popup window is invoked, end-users are allowed to create and customize filter criteria as follows.
To create and customize filter criteria, use the Add and Remove buttons.
Change a Column in a Filter Condition
To change a condition's column, invoke the column list and choose the required column.
Change an Operator in a Filter Condition
To change a condition's operator, invoke the operator list and choose the required operator.
Edit a Condition's Value
To edit a condition's value, click the operand value and type text. To discard changes to the value and close the active edit box, press ESC.
The following properties allow you to customize the Filter Control functionality.
- The SettingsFilterControl.ViewMode property specifies how a filter expression is displayed in the Filter Control: either in the visual representation only, or in the visual representation and text filter expression editor.
- The SettingsFilterControl.AllowHierarchicalColumns property specifies if the Filter Control can display hierarchical columns. The max hierarchy depth level can be limited by using the SettingsFilterControl.MaxHierarchyDepth property.
- The SettingsFilterControl.ShowAllDataSourceColumns property specifies whether all data source columns are visible in the Filter Control, or only the columns that are maintained by the grid's column collection.
Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
The source code files for this demo are installed (by default) in the following directory:
Open CS Solution
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxGridViewDemos