Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Collapse]Grid View
   [Expand]Product Information
    Getting Started
   [Expand]Fundamentals
   [Collapse]Concepts
    [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
     Adaptivity
     Save and Restore Layout
    [Expand]Templates
    [Expand]Export
     Toolbars
    [Expand]ASPxGridLookup
    ASPxGridView Designer
   [Expand]Visual Elements
   [Expand]Examples
   [Expand]Member Tables
   [Expand]ASPxGridView - Animated Images
  [Expand]Tree List
  [Expand]Card View
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Gauges
  [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]Localization
 [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]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Adaptivity

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, 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?​​​​​​​