A newer version of this page is available. Switch to the current version.

Adaptivity

  • 3 minutes to read

The ASPxGridView control allows you to build adaptive or responsive page layouts with ease. The control can automatically resize or hide grid data when the browser window is resized.

Use the ASPxGridViewAdaptivitySettings.AdaptivityMode to specify the grid's layout behavior mode.

  • HideDataCells (Responsive Layout)
  • HideDataCellsWindowLimit (Adaptive Layout)

Responsive Layout

To enable the responsive layout, set the ASPxGridViewAdaptivitySettings.AdaptivityMode property to HideDataCells.

In responsive mode, the grid automatically hides columns one by one when the browser window is resized. This also truncates the hidden columns cell text. The grid hides columns in the order specified by a column's GridViewColumn.AdaptivePriority property.

When a grid has hidden columns, an Ellipsis button (a Show adaptive detail button) is displayed for every row. The buttons are contained in the adaptive column whose position can be specified using the ASPxGridViewAdaptivitySettings.AdaptiveColumnPosition property. Clicking the ellipsis button expands an adaptive detail row that contains hidden data. You can specify the number of columns displayed in an adaptive detail row using the ASPxGridViewAdaptivitySettings.AdaptiveDetailColumnCount property. If the ASPxGridViewAdaptivitySettings.AllowOnlyOneAdaptiveDetailExpanded property is set to true, expanding an adaptive detail row collapses the previously expanded row.

Adaptivity_HideShowButtons

NOTE

In this mode, the grid cannot collapse a column and extend the other columns width when all grid columns have a fixed width. For this scenario, remove the width definition of a column with the lowest priority index (GridViewColumn.AdaptivePriority).

Note that the group footer, total footer, header, and the filter cell are not supported in responsive mode.

Online Demo

Responsive Layout

Adaptive Layout

To enable the adaptive layout, set the ASPxGridViewAdaptivitySettings.AdaptivityMode property to HideDataCellsWindowLimit.

In adaptive mode, the grid automatically changes its layout when the browser window's inner width is less than or equal to the value specified by the ASPxGridViewAdaptivitySettings.HideDataCellsAtWindowInnerWidth property. In this case, the control content is arranged into one column containing adaptive detail rows. Use the ASPxGridViewAdaptivitySettings.AdaptiveDetailColumnCount property to specify the number of columns displayed in a detail row.

You can provide a custom adaptive detail row layout by using the ASPxGridViewAdaptivitySettings.AdaptiveDetailLayoutProperties property.

AdaptiveMode

Online Demos

Adaptive Popups

The Grid 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:

Popup Dialog Property Online Demo
Header Filter GridHeaderFilterPopupSettings.SettingsAdaptivity Header Filter
Filter Control GridFilterControlPopupSettings.SettingsAdaptivity Filter Control
Customization Dialog GridCustomizationDialogPopupSettings.SettingsAdaptivity Customization Dialog
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.

Limitations

  • The HideDataCells mode (Responsive Layout) doesn't function if column resizing is enabled.
  • Neither the adaptive mode works if horizontal scrolling is enabled.
  • The cell merging feature is not supported in adaptive mode.
  • Grid layouts incorporating Data Cell Bands are not compatible with the responsive layout mode.
  • The ASPxGridView.FormatConditions property is not in effect in adaptive and responsive modes.