Skip to main content

Docking Visual Elements

  • 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.

Docking_VE_Zone

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.

Docking_VE_Panel

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.EnableAnimation
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).

Docking_VE_Header

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.

Docking_VE_CloseButton

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

Characteristics Visibility Image Style Description
PopupControl_PinButton Pin Button ASPxPopupControlBase.ShowPinButton PopupControlImages.PinButton PopupControlStyles.PinButton Allows you to pin the panel
PopupControl_RefreshButton Refresh Button ASPxPopupControlBase.ShowRefreshButton PopupControlImages.RefreshButton PopupControlStyles.RefreshButton Allows you to refresh the panel
PopupControl_MinButton Collapse Button ASPxPopupControlBase.ShowCollapseButton PopupControlImages.CollapseButton PopupControlStyles.CollapseButton Allows you to minimize the panel
PopupControl_MaxButton Maximize Button ASPxPopupControlBase.ShowMaximizeButton PopupControlImages.MaximizeButton PopupControlStyles.MaximizeButton Allows you to collapse the panel
PopupControl_CloseButton 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.

Docking_VE_ContentRegion

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.

Docking_VE_LoadingPanel

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

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.

Docking_VE_Footer

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:

Docking_VE_SizeGrip

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

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