Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Collapse]Card View
   [Expand]Product Information
   [Expand]Fundamentals
   [Collapse]Concepts
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Expand]Focus and Navigation
    [Expand]Data Editing
    [Expand]Data Shaping and Manipulation
    [Expand]Data Formatting
     Appearance Customization
     Adaptivity
     Save and Restore Layout
    [Expand]Templates
     Export Overview
     Toolbars
   [Expand]Visual Elements
   [Expand]Member Tables
   [Expand]Examples
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Adaptivity

The DevExpress ASP.NET Card View control incorporates several layout settings that you can customize to provide adaptive behavior.

View the Demo

Refer to the Card View - Adaptive Layout online demo to see this feature in action.

Expanded Card View Layout

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

We recommend using the Flow layout mode to implement the Card View's adaptive layout.

See the Data Paging topic to find more information about the Card View's layout modes and pagination.

Expanded Card Layout

You also can customize a card's layout using the built-in ASPxCardView.CardLayoutProperties property. 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.

The Adaptive Layout demo illustrates the Card View with the form layout in the adaptive mode.

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 a popup dialog's settings via its SettingsAdaptivity property. The table below lists the 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 ASPxCardView control can automatically truncate cell values if they do not fit into a cell's width. The control displays an ellipsis ('...') if the ASPxGridBehaviorSettings.AllowEllipsisInText property is set to true to indicate that the text is truncated.

Expanded See Also

How would you rate this topic?​​​​​​​