The DevExpress ASP.NET MVC Card View provides a powerful data filtering mechanism that allows end-users to easily filter cards using the Customization popup window.
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.
To enable header filtering set the Settings.ShowHeaderFilterButton property to true.
A particular filter mode for a fuilter dropdown can be specified for individual columns with the column's SettingsHeaderFilter.Mode property. If this property is set to the CheckedList for a given column, then the column's header filter dropdown will contain a check box list, allowing end-users to select multiple values for the filter criteria.
In addition to default filtering, the MVC Card View allows you to create custom filter values, define filter criteria and display these values within the column's filter dropdown (via the HeaderFilterFillItems method delegate). In this demo, custom filter values are displayed within the 'Total' and 'Quantity' column 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\MVCxCardViewDemos