Skip to main content
BuyLog In
ASP.NET Bootstrap Controls
Search in…
Docs > Grid View > Adaptivity
A newer version of this page is available. .
All docs
V19.1
ASP.NET Bootstrap Controls
Overview
Getting Started
Demos and Sample Applications
Project Configuration
Grid View
Binding to Data
Data Representation Basics
Data Summaries
Filtering
Grouping
Sorting
Cell Merging
Focus and Navigation
Data Editing
Master-Detail Relationship
Adaptivity
Templates
Export
Data-Toggle Attribute
Card View
Scheduler
Spreadsheet
Rich Text Editor
Charts
Sparkline
Data Editors
Site Navigation
Site Layout
File Manager
Redistribution and Deployment
.NET Framework API Reference
Client API Reference
Download CHM

Adaptivity

  • 2 minutes to read

The Bootstrap Grid View 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 is specified by the ASPxGridViewAdaptivitySettings.AdaptivityMode property using the following values.

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. The ellipsis button’s click 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.

BootstrapGrid_Responsive

Note that the group footer, total footer, header, and filter cells are not displayed for hidden columns in responsive mode.

Note

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

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.

To provide a custom adaptive detail row layout, use the BootstrapGridViewAdaptivitySettings.AdaptiveDetailLayoutProperties property.

BootstrapGrid_Adaptive

Note

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

Limitations

  • Neither of the modes supports customization of data rows using data row templates.
  • The Responsive Layout mode doesn’t function as expected if column resizing is enabled.
  • Neither of the modes works if horizontal scrolling is enabled.
  • Grid layouts incorporating Data Cell Bands are not compatible with the Responsive Layout mode.