Adaptivity

  • 3 min to read

The ASPxGridView control allows you to build adaptive or responsive page layouts. The control can automatically resize or hide its elements when the browser window is resized.

Responsive Layout

Set the ASPxGridViewAdaptivitySettings.AdaptivityMode property to HideDataCells to enable responsive mode.

In this mode, the grid automatically hides columns one by one and displays an ellipsis button ("Show adaptive detail") in a separate column ("Adaptive column"). You can click the ellipsis button to expand the "Adaptive detail row" that contains the hidden columns' data.

Adaptivity_HideShowButtons

Property

Description

GridViewColumn.AdaptivePriority

Specifies the order in which the grid hides columns.

ASPxGridViewAdaptivitySettings.AdaptiveColumnPosition

Specifies the "Adaptive column"'s position.

ASPxGridViewAdaptivitySettings.AdaptiveDetailColumnCount

Specifies the number of columns in the "Adaptive detail row".

ASPxGridViewAdaptivitySettings.AllowOnlyOneAdaptiveDetailExpanded

Specifies whether the expanded row is collapsed when you expand another adaptive row.

Online Demo

Responsive Layout

Adaptive Layout

Set the ASPxGridViewAdaptivitySettings.AdaptivityMode property to HideDataCellsWindowLimit to enable the adaptive layout.

In this mode, the grid arranges its content into one column when the browser window's inner width is less than the ASPxGridViewAdaptivitySettings.HideDataCellsAtWindowInnerWidth property value.

AdaptiveMode

Property

Description

ASPxGridViewAdaptivitySettings.AdaptiveDetailColumnCount

Specifies the number of columns displayed in a detail row.

ASPxGridViewAdaptivitySettings.AdaptiveDetailLayoutProperties

Allows you to provide a custom adaptive detail row layout.

Online Demos

Adaptive Popups

Enable adaptive mode for popup windows to display them as modal windows that cover the entire screen.

Use a popup dialog's SettingsAdaptivity property to access the adaptivity settings.

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

Adaptive Toolbars

Set the Enabled property to true to make a grid's toolbar adaptive. The ASPxGridView can display its toolbar items as follows when they do not fit the browser window's width.

  • Displays only icons. Hover the mouse pointer over a toolbar item to display its caption as a tooltip.

Property

Description

EnableCollapseRootItemsToIcons

Specifies whether the toolbar hides its items' text and displays only icons when the browser window width is changed.

CollapseRootItemsToIconsAtWindowInnerWidth

Specifies the maximum browser window inner width when the toolbar hides an items' text and displays only icons.

<dx:ASPxGridView runat="server" ID="Grid" ...>
    <Toolbars>
        <dx:GridViewToolbar>
            <SettingsAdaptivity Enabled="true" EnableCollapseRootItemsToIcons="true" 
            CollapseRootItemsToIconsAtWindowInnerWidth="400" />
            <Items>
            ...
            </Items>
        </dx:GridViewToolbar>
    </Toolbars>
    <Columns>
    ...
    </Columns>
</dx:ASPxGridView>
  • Moves toolbar items to the side menu and hides them under the hamburger button. Click this button to show the toolbar items.

Property

Description

EnableCollapseToSideMenu

Specifies whether the grid moves toolbar items to the side menu when the browser window's width changes.

CollapseToSideMenuAtWindowInnerWidth

Specifies the browser window's maximum inner width when the toolbar moves its items to the side menu.

<dx:ASPxGridView runat="server" ID="Grid" ...>
    <Toolbars>
        <dx:GridViewToolbar>
            <SettingsAdaptivity Enabled="true" EnableCollapseToSideMenu="true" 
            CollapseToSideMenuAtWindowInnerWidth="400" />
            <Items>
            ...
            </Items>
        </dx:GridViewToolbar>
    </Toolbars>
    <Columns>
    ...
    </Columns>
</dx:ASPxGridView>

Online Demo

ASPxGridView - Toolbar

Limitations

  • The HideDataCells mode (Responsive Layout) does not function if column resizing is enabled.

  • The grid does not support adaptive mode if horizontal scrolling is enabled.

  • The grid does not support the cell merging feature in adaptive mode.

  • The grid does not support Data Cell Bands in responsive mode.

  • The ASPxGridView.FormatConditions property is not in effect in adaptive and responsive modes.