Log In
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Collapse]Card View
   [Expand]Product Information
    Getting Started
    [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
     Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Member Tables
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [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]Report Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation


The ASPxCardView control allows you to create adaptive layouts so the grid content will look consistent across all 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. Specify a layout mode by setting the ASPxCardViewSettings.LayoutMode property to one of the following values:

  • Layout.Table - Organizes cards in a table with a specified number of rows and columns (the CardViewTableLayoutSettings.ColumnCount and CardViewTableLayoutSettings.RowsPerPage properties).
  • Layout.Flow - Arranges cards one after another to occupy all available space. The CardViewFlowLayoutSettings.ItemsPerPage property specifies the number of cards displayed on a page.
  • Layout.Breakpoints - Reorganizes cards according to custom layout scenarios for different browser widths. It allows you to display, for example, three cards in a row for narrow screens or five cards in a row for wider screens.

    This functionality is based on specifying the browser widths (breakpoints) at which the grid shifts and resizes its items to better arrange the control's information.


    Note that cards have the fixed height (specified in the .dxcvFlowCard_<ThemeName> or .dxcvBreakpointsCard_<ThemeName> CSS selectors) when the control is in Flow or Breakpoints layout modes. Use the ASPxCardView.Styles.FlowCard.Height or ASPxCardView.Styles.BreakpointCard.Height (CardViewCardStyle.Height) properties to set a custom card's height in these modes.

    ASPxCardView stores breakpoints in the BreakpointsLayoutCollection<T> object that is accessed at the ASPxCardViewBreakpointsLayoutSettings object level. Each breakpoint is a CardViewBreakpoint class instance. You can change the following characteristics of individual breakpoints.

    Property Description
    BreakpointsLayoutBreakpoint.DeviceSize Specifies the device size ("Small", "Medium", "Large").
    ASPxCardViewBreakpointsLayoutSettings.CardsPerRow, CardViewBreakpoint.CardsPerRow Specifies the number of cards the Card View displays in a row.
    BreakpointsLayoutBreakpoint.MaxWidth Specifies the maximum browser width at which the control rearranges its cards when the BreakpointsLayoutBreakpoint.DeviceSize property is set to BreakpointsLayoutDeviceSizes.Custom.

    Creating a LayoutBreakpoint object implicitly declares the range of browser widths between 0 and the BreakpointsLayoutBreakpoint.MaxWidth property value (if there are no breakpoints with a lower MaxWidth property value) where the Card View arranges the specified number of cards in a row (CardViewBreakpoint.CardsPerRow).

    Use the ASPxCardViewBreakpointsLayoutSettings.CardsPerRow property to define how many cards the Card View displays in a row if there is no specified breakpoints for a given browser's width.

    View the Demo

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

    Expanded Example

    The following example illustrates the programmatic and declarative approaches on how to implement three different layout scenarios for three different browser's sizes (Small, Medium, Large) as shown on the image below.

    Declarative approach:

    Programmatic approach:

Expanded Card Layout

Use the ASPxCardView.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.

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

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