Features

This demo allows you to use many of the features provided by the DevExpress MVC PopupControl extension. Use options on the right to change various layout and behavior property settings and click Apply to assign them. To invoke the MVC PopupControl extension, click the PopupElement button displayed on the left.

Available options include:

• ShowCloseButton. This option specifies whether a button is displayed within a popup window's header allowing end-users to close the window.
• ShowShadow. This option applies a shadow effect to popup windows.
• ShowFooter and ShowHeader. Use these options to toggle the visibility of a popup window's header and footer.

• PopupHorizontalAlign. This option specifies the horizontal alignment of a popup window relative to the corresponding web control/HTML element. Option values include:

  • NotSet. A popup window is displayed on the x-coordinate of the mouse cursor position.
  • OutsideLeft. A popup window is displayed to the left of the corresponding HTML element, so that the x-coordinate of the window's right border equals the x-coordinate of the element's left border.
  • LeftSides. A popup window is displayed, so that the left border x-coordinates of the window and its corresponding element are equal.
  • RightSides. A popup window is displayed, so that the right border x-coordinates of the window and its corresponding element are equal.
  • OutsideRight. A popup window is displayed to the right of the corresponding HTML element, so that the x-coordinate of the window's left border equals the x-coordinate of the element's right border.

• PopupVerticalAlign. This option specifies the vertical alignment of a popup window with respect to the corresponding web control/HTML element. Choose one of the following option values:

  • NotSet. A popup window is displayed on the y-coordinate of the mouse cursor position.
  • Above. A popup window is displayed above the corresponding HTML element, so that the y-coordinate of the window's bottom border equals the y-coordinate of the element's top border.
  • TopSides. A popup window is displayed, so that the top border y-coordinates of the window and its corresponding element are equal to one another.
  • BottomSides. A popup window is displayed, so that the bottom border y-coordinates of the window and its corresponding element are equal.
  • Below. A popup window is displayed below the corresponding HTML element so that the y-coordinate of the window's top border equals the y-coordinate of the element's bottom border.
• PopupHorizontalOffset and PopupVerticalOffset. Use these options to specify a popup window's horizontal and vertical offsets.
• Opacity. This option allows you to customize the level of transparency for a popup window and its controls. The option accepts values ranging from 0 (the window is transparent and so it's completely invisible) to 100 (the window is opaque).
• EnableAnimation. Use this option to enable predefined popup animation effects.
• PopupAnimationType. This property specifies the type of animation used to show a popup window.
  • Fade. A popup window is displayed using a fade-in effect.
  • Slide. A popup window is displayed using a slide effect.
• CloseAnimationType. This property specifies the type of animation used to close a popup window.
  • Fade. A popup window is closed using a fade-in effect.
  • Slide. A popup window is closed using a slide effect.
• AllowDragging. Activate this option to allow a popup window to be dragged within the bounds of the client browser's window.
• DragElement. Choose which portion of the popup window starts the drag operation: header (a popup window can be dragged by its header) or window (dragging can be started by clicking anywhere within a popup window's client area).
• AllowResize. Activate this option to allow a popup window sizing. Use the option in conjunction with the ResizingMode and ShowSizeGrip options. A popup window's size limits can be specified via the MinHeight, MinWidth, MaxHeight, and MaxWidth properties.
• ResizingMode. This option controls whether a popup window is redrawn dynamically during resizing operations (the Live value), or the window is redrawn after the resizing operation is completed (the Postponed value).
• ShowSizeGrip. Use this option to toggle the visibility of a size grip element - that when dragged - allows end-users to size a popup window. The size grip can be displayed at all times (True), never (False) or dependent upon the AllowResize property setting (Auto).

• CloseAction. Use this option to specify the client action that closes a popup window. Option values include:

  • None. A popup window can be closed only in code, via a specific client script method.
  • CloseButton. A popup window can only be closed by pressing the Close button displayed within the window's header.
  • OuterMouseClick. A popup window is closed by a click outside the window's region.
  • MouseOut. A popup window is closed if the mouse pointer moves out of the window's region. To specify the hide delay (in milliseconds), use the DisappearAfter option.

• CloseOnEscape. This option specifies if a popup window is closed when an end-user presses the ESC key.

• PopupAction. Use this option to specify the client action that invokes a popup window. Choose one of the following option values:

  • None. A popup window can be invoked only in code, via a specific client script method.
  • LeftMouseClick. A popup window can be invoked by left-clicking a corresponding web control or HTML element, specified via the PopupElementID property.
  • RightMouseClick. A popup window can be invoked by right-clicking a corresponding web control or HTML element, specified via the PopupElementID property.
  • MouseOver. A popup window is invoked when the mouse pointer enters the region occupied by a corresponding web control or HTML element, specified via the PopupElementID property. To specify the display delay (in milliseconds), use the AppearAfter option.