The ASP.NET MVC Panel extension allows you to build adaptive page layouts with ease.
The Panel extension can collapse or hide its content. To enable collapse functionality, the Collapsible property is set to true. When the collapse functionality is enabled, the Panel extension can function adaptively, i.e., it can automatically collapse or hide its content when the browser window is resized. In this demo, the adaptivity behavior is defined for individual panels using options accessible via the SettingsAdaptivity property.
Collapsing Content.
The panel collapses its content when any of the browser window dimensions is less than the values defined by the CollapseAtWindowInnerHeight and CollapseAtWindowInnerWidth properties.
Hiding Content.
The panel hides its content when any of the browser window dimensions is less than the values defined by the HideAtWindowInnerHeight and HideAtWindowInnerWidth properties.
End-users can expand the collapsed panel. The panel allows you to define the content that will be displayed within the expanded panel. In this demo, the panel with the Name "topPanel" displays a horizontal menu when the screen width is greater than 580px, and displays a vertically oriented menu when the screen width is less than 580px and the panel is expanded. The expanded panel content is defined using the SetExpandedPanelTemplateContent method.
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).
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxNavigationAndLayoutDemos |