Skip to main content
A newer version of this page is available. .

Card View

  • 2 minutes to read

The DevExpress Bootstrap Card View is a full-featured data presentation control that renders itself using Bootstrap CSS classes. It fully supports data editing and delivers numerous end-user data shaping features, including facilities for end-user data filtering and sorting. Total summaries are also available out-of-the box.

On the server side, the Card View control is represented by the BootstrapCardView class. The client-side functionality is handled by the BootstrapClientCardView class.

Data Binding

BootstrapCardView_Landing_DataBinding

The Bootstrap Card View control can display data from a database, an array or collection, as well as the public properties of collection elements.

The Bootstrap Card View control has been designed to work with large datasets. When bound to a data source in the database server mode, the Card View only loads small portions of data on demand and all required data processing (such as sorting) is performed on the data server, which significantly reduces the application’s response time.

Sorting

BootstrapCardView_Landing_Sorting

The Bootstrap Card View allows its data to be sorted by an unlimited number of data columns.

Summaries

BootstrapCardView_Landing_Summary

The Bootstrap Card View control supports total summaries. A total summary represents the value of an aggregate function calculated over all card within the Card View and is displayed within the footer.

Data Editing

BootstrapCardView_Landing_Editing

The Card View control provides end-user data editing functionality out of the box. The following edit modes are supported.

  • Edit Form
  • Popup Edit Form
  • Batch Editing

Filtering

BootstrapCardView_Landing_Filtering

Filtering allows you to display a subset of records that meet certain criteria in the data source. When filtering is applied to Bootstrap Card View, only data items that meet the specified criteria are displayed. Data can be filtered against a single data column or multiple data columns.

End-users can build simple filter criteria, and apply it using a column’s Header Filter.

See Also