Adaptivity

  • 4 min to read

The ASPxCardView control allows you to create adaptive layouts that ensure a consistent appearance on different devices.

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 ASPxCardViewSettings.LayoutMode property to one of the following values.

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 form layout content into one column when the browser window's inner width is less than or equal to the FormLayoutAdaptivitySettings.SwitchToSingleColumnAtWindowInnerWidth property. To enable 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 adaptive mode.

Adaptive Popups

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

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

Popup Dialog Property Online Demo
Header Filter GridHeaderFilterPopupSettings.SettingsAdaptivity Header Filter
Filter Control GridFilterControlPopupSettings.SettingsAdaptivity Filter Control
Popup Edit Form GridEditFormPopupSettings.SettingsAdaptivity Popup Edit Form

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

Text Truncation with Ellipsis

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.

Online Demo

Card View - Text Truncation with Ellipsis

See Also