Log In
[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
  [Expand]Chart Control
  [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]Card View
  [Expand]Vertical Grid
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Data Editors
  [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]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation


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.

The layout behavior mode can be specified by using the ASPxGridViewAdaptivitySettings.AdaptivityMode property set to the following values.

  • 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 and cell text becomes truncated. The order in which columns are hidden is controlled by the 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.

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, please 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, please 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.

How would you rate this topic?​​​​​​​