Docking Visual Elements

Dec 19, 2024
4 minutes to read

This topic describes the on-screen ASPxDockPanel and ASPxDockZone elements and lists the main members that affect their appearance and functionality.

Dock Zone

A dock zone (the ASPxDockZone control) is an area where users can dock panels.

You can use a dock panel’s ASPxDockPanel.ForbiddenZones property to specify prohibited zones for a panel - the zones to which a panel cannot be docked. To change the appearance of allowed and forbidden zone states, use a dock zone’s DockZoneStyles.DockingAllowedStyle and DockZoneStyles.DockingForbiddenStyle properties. These appearances are used to highlight zones when users drag panels and to indicate whether a specific zone allows them to dock panels.

A Panel Placeholder is a zone where users can dock the panel. Use the DockZoneStyles.PanelPlaceholder property to highlight this section when users drag the panel.

The table below lists the main members that affect element appearance:

Characteristics	Members
Orientation	ASPxDockZone.Orientation
Appearance	DockZoneStyles.Disabled, DockZoneStyles.DockingAllowedStyle, DockZoneStyles.DockingForbiddenStyle, DockZoneStyles.PanelPlaceholder
Panel Spacing	ASPxDockZone.PanelSpacing

Dock Panel

A dock panel (the ASPxDockPanel control) is a content placeholder that you can move and place at any part of a page or dock to zones within a web page.

A panel can consist of header, content and footer sections.

The table below lists the main members that affect element appearance and functionality.

Characteristics	Members
Animation	ASPxPopupControlBase.PopupAnimationType
Dragging Ability	ASPxDockPanel.AllowDragging
Drag Element	ASPxPopupControlBase.DragElement
Resizing Ability	ASPxPopupControlBase.AllowResize
Size Constraints	ASPxPopupControlBase.MinHeight, ASPxPopupControlBase.MaxHeight, ASPxPopupControlBase.MinWidth, ASPxPopupControlBase.MaxWidth
Scroll Bars	ASPxPopupControlBase.ScrollBars
Allowed State	ASPxDockPanel.AllowedDockState

Panel Header

A dock panel’s header is displayed at the top of the panel and can consist of the header image, header text and close button. Users can use a panel’s header to drag the panel within the page (if the ASPxPopupControlBase.AllowDragging property is enabled).

The table below lists the main members that affect element appearance and functionality:

Characteristics	Members
Visibility	ASPxPopupControlBase.ShowHeader
Appearance	PopupControlStyles.Header
Text Content	ASPxPopupControlBase.HeaderText
Image	PopupControlImages.Header
Navigation Location	ASPxPopupControlBase.HeaderNavigateUrl
Template	ASPxPopupControlBase.HeaderTemplate

Header Buttons

A panel header can contain the following buttons: a pin button, refresh button, minimize button, maximize button, and close button.

The table below lists API members that allow you to customize the control’s button appearance and functionality.

Characteristics	Visibility	Image	Style	Description
Pin Button	ASPxPopupControlBase.ShowPinButton	PopupControlImages.PinButton	PopupControlStyles.PinButton	Allows you to pin the panel
Refresh Button	ASPxPopupControlBase.ShowRefreshButton	PopupControlImages.RefreshButton	PopupControlStyles.RefreshButton	Allows you to refresh the panel
Collapse Button	ASPxPopupControlBase.ShowCollapseButton	PopupControlImages.CollapseButton	PopupControlStyles.CollapseButton	Allows you to minimize the panel
Maximize Button	ASPxPopupControlBase.ShowMaximizeButton	PopupControlImages.MaximizeButton	PopupControlStyles.MaximizeButton	Allows you to collapse the panel
Close Button	ASPxPopupControlBase.ShowCloseButton	PopupControlImages.CloseButton	PopupControlStyles.CloseButton	Allows you to close the panel

Panel Content Region

A dock panel’s content region is the main panel element that displays the content. This region can contain a set of child web controls or HTML elements.

The table below lists the main members that affect element appearance and functionality:

Characteristics	Members
Appearance	PopupControlStyles.Content
Content Text	ASPxPopupControlBase.Text
Content Elements	ASPxPopupControlBase.Controls
External Content	ASPxPopupControlBase.ContentUrl

Loading Panel

The Loading Panel is displayed within a panel while waiting for a callback response. The loading panel contains a transparent Loading Div element (the default setting). You can change the div element’s style settings to display it.

The table below lists the main members that affect the appearance and functionality of loading panels.

Characteristic	Members
Delay	SettingsLoadingPanel.Delay
Visibility	SettingsLoadingPanel.Enabled
Text	SettingsLoadingPanel.Text
Image	SettingsLoadingPanel.ShowImage, SettingsLoadingPanel.ImagePosition, PopupControlImages .LoadingPanel
Style	PopupControlStyles.LoadingPanel
Div Element Style	PopupControlStyles.LoadingDiv

Panel Footer

A dock panel’s footer is displayed at the bottom of the panel and can consist of the footer image, footer text and size grip.

The table below lists the main members that affect element appearance and functionality:

Characteristics	Members
Visibility	ASPxPopupControlBase.ShowFooter
Appearance	PopupControlStyles.Footer
Text Content	ASPxPopupControlBase.FooterText
Image	PopupControlImages.Footer
Navigation Location	ASPxPopupControlBase.FooterNavigateUrl
Template	ASPxPopupControlBase.FooterTemplate

Size Grip

The size grip allows users to resize a panel diagonally. Set the ASPxPopupControlBase.ShowSizeGrip property to the following to specify how the size grip is displayed:

ShowSizeGrip.True - to always display the size grip.
ShowSizeGrip.False - to never display the size grip.
ShowSizeGrip.Auto - to display the size grip depending on the ASPxPopupControlBase.AllowResize property setting.

The table below lists the main members that affect element appearance and functionality:

Characteristics	Members
Visibility	ASPxPopupControlBase.AllowResize, ASPxPopupControlBase.ShowSizeGrip
Image	PopupControlImages.SizeGrip