[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
  [Collapse]Grid 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
    [Expand]Master-Detail Relationship
     Appearance Customization
     Save and Restore Layout
    ASPxGridView Designer
   [Expand]Visual Elements
   [Expand]Member Tables
   [Expand]ASPxGridView - Animated Images
  [Expand]Tree List
  [Expand]Card View
  [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 and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)


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)

Expanded 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.


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.

View the Demo

To see this mode in action, refer to the Responsive Layout online demo.

Expanded 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.

View the Demo

To see this mode in action, refer to the following online demos: Adaptive Layout and Adaptive Layout with Form Layout.

Expanded 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:

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

Expanded 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.

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