Adaptivity

Jun 16, 2022
4 minutes to read

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

Note

In adaptive mode, the control’s width should be specifies in percentage.

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.

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 the 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 smaller screens or five cards in a row for larger screens.

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