Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Show All Themes

Filter Control

Product Name 
Category Name 
Company Name 
Contact Name 
Unit Price 
Units In Stock 
ChaiBeveragesExotic LiquidsCharlotte Cooper$18.0039$702.00
ChangBeveragesExotic LiquidsCharlotte Cooper$19.0017$323.00
Guaraná FantásticaBeveragesRefrescos Americanas LTDACarlos Diaz$4.5020$90.00
Sasquatch AleBeveragesBigfoot BreweriesCheryl Saylor$14.00111$1,554.00
Steeleye StoutBeveragesBigfoot BreweriesCheryl Saylor$18.0020$360.00
Côte de BlayeBeveragesAux joyeux ecclésiastiquesGuylène Nodier$263.5017$4,479.50
Chartreuse verteBeveragesAux joyeux ecclésiastiquesGuylène Nodier$18.0069$1,242.00
Ipoh CoffeeBeveragesLeka TradingChandra Leka$46.0017$782.00
Laughing Lumberjack LagerBeveragesBigfoot BreweriesCheryl Saylor$14.0052$728.00
Outback LagerBeveragesPavlova, Ltd.Ian Devling$15.0015$225.00
Page 1 of 2 (12 items)Prev12Next
Show filter builder dialog[Category Name] Equals 'Beverages' Clear

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.

  • Add/Remove Conditions
    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.

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).
Open CS Solution
The source code files for this demo are installed (by default) in the following directory:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxGridViewDemos