[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Tree List
  [Collapse]Card View
    Overview - CardView
    Main Features - Card View
   [Collapse]Concepts
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Expand]Focus and Navigation
    [Expand]Data Editing and Validation
     Adaptivity
    [Expand]Export
   [Expand]Member Tables
   [Expand]Visual Elements
  [Expand]Reporting
  [Expand]Charting
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]SpellChecker
  [Expand]Query Builder
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Adaptivity

DevExpress MVC Card View allows you to create adaptive layouts that ensure a consistent appearance on different devices.

Expanded Card View Layout

The Card View includes three layout modes that allow you to define the number and arrangement of cards displayed on a single page. You can specify the layout mode by setting the CardViewModel.LayoutMode property to one of the following values.

Expanded Card Layout

Use the CardViewSettings.CardLayoutProperties property to customize a card's layout. This property provides access to the built-in form layout that defines the columns' arrangement within a card.

The Card View's form layout incorporates the adaptive mode that is available through the FormLayoutProperties.SettingsAdaptivity property. This mode provides the capability to automatically reorganize the form layout's content into one column when the browser window's inner width is less than or equal to the FormLayoutAdaptivitySettings.SwitchToSingleColumnAtWindowInnerWidth property. To enable the adaptive mode, set the FormLayoutAdaptivitySettings.AdaptivityMode to the FormLayoutAdaptivityMode.SingleColumnWindowLimit's value.

Expanded Adaptive Popups

The Card View control also incorporates adaptive popup dialogs based on the Popup Control's adaptive mode. In adaptive mode, the popup dialog is transformed into a modal window that covers the screen content.

You can access the popup dialog's settings using its SettingsAdaptivity property. The table below lists available dialogs:

Refer to the listed demos to see a popup dialog's adaptive behavior. Each demo uses the SettingsAdaptivity property.

Expanded Text Truncation with Ellipsis

View the Demo

Refer to the Card View - Text Truncation with Ellipsis online demo to see this feature in action.

The DevExpress MVC CardView extension can automatically truncate cell values if they do not fit into a cell's width. The extension displays an ellipsis ('...') if the ASPxGridBehaviorSettings.AllowEllipsisInText property is set to true to indicate that the text is truncated.

Expanded See Also

Is this topic helpful?​​​​​​​