The DevExpress ASP.NET MVC Vertical Grid provides a powerful data filtering mechanism that displays a dropdown list of all unique values within a row. Invoked by activating the row header's filter button, end-users can filter the records stored in the underlying dataset by selecting the values displayed within the dropdown.
Additionally, end-users can filter items by entering text in the filter editor above the list. When typing a filter string, the header filter items list is automatically updated, so only the relevant items that match the filter string are displayed.
Filter dropdown buttons are disabled by default. To show filter buttons, set the Settings.ShowHeaderFilterButton property to true.
You can specify the header filter mode for a row using the SettingsHeaderFilter.Mode property.
- In List mode, the row's header filter dropdown displays a regular list of filter items, allowing end-users to select a single value.
- In CheckedList mode, the row's header filter dropdown contains a check box list, allowing end-users to select multiple values for the filter criteria.
- DateRangeCalendar and DateRangePicker modes are available for date columns only.
- NumericRangePicker mode is available for numeric columns only.
The MVC Vertical Grid allows you to create custom filter values, define filter criteria and display these values within the row's filter dropdown (via the HeaderFilterFillItems method delegate). In this demo, custom filter values are displayed within the 'Price' and 'House Size' rows' filter dropdowns.
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\MVCxVerticalGridDemos