The DevExpress ASP.NET MVC GridView extension allows you to build adaptive page layouts with ease. The grid can automatically resize or collapse grid data when the browser window is resized.
The grid layout behavior can be customized by using the SettingsAdaptivity property. In this demo, the Grid View automatically reorders its content into one column containing adaptive detail rows, when the browser window inner width is less than or equal to 800 pixels (specified by the HideDataCellsAtWindowInnerWidth property).
The adaptive detail row layout behavior can be customized by using the AdaptiveDetailLayoutProperties property. In this demo, an adaptive detail row automatically reorders its content into one column when the browser window is less than or equal to 600 pixels (specified by the SwitchToSingleColumnAtWindowInnerWidth property).
Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
The source code files for this demo are installed (by default) in the following directory:
Open CS Solution
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxGridViewDemos