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
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Collapse]Navigation and Layout Extensions
   [Expand]FormLayout
   [Expand]Menu
   [Expand]NavBar
   [Expand]Ribbon
   [Expand]PageControl
   [Expand]TabControl
   [Expand]PopupMenu
   [Expand]Splitter
   [Expand]TreeView
   [Collapse]Panel
     Overview - Panel
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Overview - Panel

The DevExpress ASP.NET MVC Panel is a server MVC extension with advanced client-side API. Panel provides a container for custom HTML and other MVC extensions. The Panel extension can expand or collapse any content automatically (the adaptivity feature) and on demand.

See Also

Panel - Online Demos

Expanded Contents

Expanded Adding Panel to a Project Manually

Note

Project requirements.

Before you start, make sure your project is prepared for using DevExpress ASP.NET MVC Extensions. See this topic to learn how to prepare your project: Integration into an ASP.NET MVC Project.

To declare the Panel code in the View, you need to call the ExtensionsFactory.Panel helper method. This method returns the Panel extension that is implemented by the PanelExtension class.

To configure the Panel extension, pass the PanelSettings object to the ExtensionsFactory.Panel helper method as a parameter. The PanelSettings object contains all the Panel extension settings. You can define panel content using the CollapsiblePanelSettings.SetContent (via PanelSettings.SetContent) method.

The image below illustrates the result. Note that by default, the panel does not produce any visual elements.

Note that the CollapsiblePanelSettings.SetContent method has an overload that accepts a string as a parameter. You can use this overload to define custom HTML for your panel content, like it is displayed in the code example below.

Expanded Adding Panel to a Project Using the Insert Extension Wizard

The Insert DevExpress MVC Extension Wizard allows you to insert DevExpress ASP.NET MVC extensions to your project with minimum or no coding.

Follow the steps below to insert the Panel extension to your project.

  1. Open the required View file (Index.cshtml in this topic), focus on the position in the code where you would like to insert the Panel, right-click -> select "Insert DevExpress MVC Extension v17.2…"

  2. The Insert Extension Wizard opens. Navigate to the tab with the Navigation&Layout extensions and select Panel. Define the extension name.

  3. Click the "Insert" button.

After these manipulations, Insert Extension Wizard generates a view code for the Panel.

Then, you need to define the panel's content, like it is shown in the code sample below.

Expanded Fixed Position

The panel allows you to dock your content to any side of the browser window by setting the CollapsiblePanelSettings.FixedPosition property to any of the following enumeration values.

Enum Field Description
PanelFixedPosition.WindowBottom Panel is docked to the bottom side of the browser screen.
PanelFixedPosition.WindowTop Panel is docked to the top side of the browser screen.
PanelFixedPosition.WindowLeft Panel is docked to the left side of the browser screen.
PanelFixedPosition.WindowRight Panel is docked to the right side of the browser screen.

If the CollapsiblePanelSettings.FixedPosition property value is set to PanelFixedPosition.None, the panel position will not be fixed.

The code example below demonstrates how to fix the panel to the left side of the screen.

When fixed to any of the screen side, the panel displays a specific border that visually separates panel content from other page content.

Tip

You can specify the fixed position in the panel options when adding a panel with the Insert Extension Wizard.

Note

In the fixed position, the Panel extensions persist its position regardless of page scrolling.

Expanded Panel Collapsing

The Panel extension has a capability to collapse its content.

To enable panel collapsing, you need to set the CollapsiblePanelSettings.Collapsible property to true. By default, a panel with enabled collapsing is rendered in the collapsed state. To render the panel initially expanded, set the PanelCollapsingSettings.ExpandOnPageLoad (using CollapsiblePanelSettings.SettingsCollapsing.ExpandOnPageLoad) property to true.

Animation effects

The panel allows you to define the animation effect that will be applied when the panel is expanded or collapsed. You can define the animation effect using the PanelCollapsingSettings.AnimationType property, like it is shown in the code example below.

Expand effects

The Panel extension provides an ability to pop over page content when expanded or to slide page content. You can control the expand effect using the PanelCollapsingSettings.ExpandEffect property.

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