ContextQMD
Back to Devexpress

ASPxPopupControl Class

aspnet-devexpress-dot-web-2307cde4.md

latest21.1 KB
Original Source

ASPxPopupControl Class

A popup control.

Namespace : DevExpress.Web

Assembly : DevExpress.Web.v25.2.dll

NuGet Package : DevExpress.Web

Declaration

csharp
public class ASPxPopupControl :
    ASPxPopupControlBase,
    IControlDesigner
vb
Public Class ASPxPopupControl
    Inherits ASPxPopupControlBase
    Implements IControlDesigner

The following members return ASPxPopupControl objects:

Remarks

The ASPxPopupControl allows you to create popup windows in your web application. Popup windows appear separately from an application’s main window and disappear after the specified user action.

Create a Popup Control

Design Time

The ASPxPopupControl control is available on the DX.25.2: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize the control’s settings, or paste the control markup in the page’s source code.

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" HeaderText="Header" PopupElementID="ASPxButton1">
    <ContentCollection>
        <dx:PopupControlContentControl runat="server">
            <dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Text="Text box" Width="170px">
            </dx:ASPxTextBox>
        </dx:PopupControlContentControl>
    </ContentCollection>
</dx:ASPxPopupControl> 

<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Show Popup"></dx:ASPxButton>

Run Time

csharp
using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
    Button btn = new Button();
    btn.ID = "ASPxButton1";
    btn.Text = "Show Popup";
    Page.Form.Controls.Add(btn);

    ASPxPopupControl pc = new ASPxPopupControl();
    pc.ID = "ASPxPopupControl1";
    Page.Form.Controls.Add(pc);
    pc.PopupElementID = "btn1";
    pc.HeaderText = "Header";
    pc.Controls.Add(CreateControl());
}
Control CreateControl()
{
    TextBox txt = new TextBox();
    txt.ID = "ASPxTextBox1";
    txt.Width = 200;
    txt.Text = "Text box";
    return txt;
}
vb
Imports DevExpress.Web
...
Class SurroundingClass
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        Dim btn As Button = New Button()
        btn.ID = "ASPxButton1"
        btn.Text = "Show Popup"
        Page.Form.Controls.Add(btn)
        Dim pc As ASPxPopupControl = New ASPxPopupControl()
        pc.ID = "ASPxPopupControl1"
        Page.Form.Controls.Add(pc)
        pc.PopupElementID = "btn1"
        pc.HeaderText = "Header"
        pc.Controls.Add(CreateControl())
    End Sub

    Private Function CreateControl() As Control
        Dim txt As TextBox = New TextBox()
        txt.ID = "ASPxTextBox1"
        txt.Width = 200
        txt.Text = "Text box"
        Return txt
    End Function
End Class

Note

DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.

Client-Side API

The ASPxPopupControl ‘s client-side API is implemented with JavaScript language and exposed by the ASPxClientPopupControl object.

|

Availability

|

Available by default.

| |

Client object type

|

ASPxClientPopupControl

| |

Access name

|

ASPxPopupControl.ClientInstanceName

| |

Events

|

ASPxPopupControl.ClientSideEvents

|

Run Demo: Client-Side Functionality

Windows Collection

The popup control stores its popup windows in the ASPxPopupControl.Windows collection. If this collection is empty, the control displays a single default popup window. In this case, you can define the default window’s appearance and behavior at the popup control level. If the ASPxPopupControl.Windows collection is not empty, use settings at an individual window level to customize each window.

In markup:

aspx
<dx:ASPxPopupControl runat="server" ID="Popup">
    <Windows>
        <dx:PopupWindow Name="AndrewFuller" ...></dx:PopupWindow>
        <dx:PopupWindow Name="JanetLeverling" ...></dx:PopupWindow>
        ...
    </Windows>
</dx:ASPxPopupControl>

In code:

csharp
protected void Popup_Init(object sender, EventArgs e) {
    List<PopupWindow> windowList = new List<PopupWindow>();
    foreach (Customer customer in CustomersList)
        windowList.Add(new PopupWindow() {
            HeaderText = customer.Name,
            FooterText = customer.Country,
            Text = customer.Details
        });
    Popup.Windows.Add(windowList[0]);
    Popup.Windows.Add(windowList[0], windowList[1]);
    Popup.Windows.AddRange(windowList);
}
vb
Protected Sub Popup_Init(ByVal sender As Object, ByVal e As EventArgs)
    Dim windowList As List(Of PopupWindow) = New List(Of PopupWindow)()

    For Each customer As Customer In CustomersList
        windowList.Add(New PopupWindow() With {
            .HeaderText = customer.Name,
            .FooterText = customer.Country,
            .Text = customer.Details
        })
    Next

    Popup.Windows.Add(windowList(0))
    Popup.Windows.Add(windowList(0), windowList(1))
    Popup.Windows.AddRange(windowList)
End Sub

Learn more

Data Binding

The popup control allows you to populate window content from a data source (ASPxPopupControl.DataSource and ASPxDataWebControl.DataSourceID).

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" DataSourceID="XmlDataSource1" >
    <%-- ... --%>
</dx:ASPxPopupControl>

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/Charts.xml"
    XPath="//Chart" />

Learn more

Run Demo: Data Binding

Load Content

You can use the PopupControlContentControl object or the Controls property to specify a popup control’s content.

Note

  • A popup element cannot contain another popup element inside.

  • Specify the ASPxPopupControl height and width (accessible by the ASPxWebControl.Height and ASPxWebControl.Width properties) cannot be set as a percentage. Set the dimensions in pixels to correctly display the control in all browsers.

  • ASPX

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" HeaderText="Header" PopupElementID="ASPxButton1">
    <ContentCollection>
        <dx:PopupControlContentControl runat="server">
            <dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Text="Text box" Width="170px" />
        </dx:PopupControlContentControl>
    </ContentCollection>
</dx:ASPxPopupControl>

Run Demo: Features

Use the ContentUrl property to load the specified web page content into the popup control.

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" 
ContentUrl="~/PopupControl/ContentUrlFeedForm.aspx" >
    <%-- ... --%>
</dx:ASPxPopupControl>

Run Demo: Content URL

The popup control supports callbacks technology that allows you to load the control’s content on demand (LoadContentViaCallback).

aspx
<dx:ASPxPopupControl ID="PopupControl" runat="server" LoadContentViaCallback="OnFirstShow" >
    <%-- ... --%>
</dx:ASPxPopupControl>

Run Demo: Load Content on Demand

You can assign the popup window to an HTML element(s) on a web page :

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" HeaderText="Header" PopupElementID="ASPxButton1">
    <%-- ... --%>
</dx:ASPxPopupControl> 

<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Show Popup"></dx:ASPxButton>

If you do not specify a target element for a popup window, you can use the ASPxPopupControlBase.ShowOnPageLoad property to display a popup window on the page load. The ASPxPopupControlBase.Left and ASPxPopupControlBase.Top properties specify the popup window position.

Use the following APIs to define the popup control’s position relatively to the target element:

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" PopupHorizontalAlign ="Center"  
PopupVerticalAlign="Middle" PopupHorizontalOffset="5" PopupVerticalOffset="5" >
    <%-- ... --%>
</dx:ASPxPopupControl>

Run Demo: Features

Use the PopupAction and CloseAction properties to specify a user action that shows/closes a popup window.

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" PopupAction="MouseOver" CloseAction="CloseButton" >
    <%-- ... --%>
</dx:ASPxPopupControl>

The CloseOnEscape and CloseOnEscape properties specify whether a popup control/window is closed when a user presses the ESC key.

Run Demo: Features

Time Delay

Use the AppearAfter and DisappearAfter properties to specify the control’s display/hide delay (in milliseconds).

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" 
AppearAfter="4000" DisappearAfter="4000" >
  <%-- ... --%>
</dx:ASPxPopupControl>

Run Demo: Features

The popup control supports modal mode (Modal). In this mode, a modal popup window takes and holds input focus until a user closes the window.

aspx
<dx:ASPxPopupControl ID="window1" runat="server" Modal="true" ...>
    <%-- ... --%>
</dx:ASPxPopupControl>

Run Demo: Modal Window

Templates

You can provide custom content for the popup control’s elements. The following templates are available:

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" >
    <HeaderTemplate>
        <table style="width: 100%;">
            <tr>
                <td>
                    
                </td>
                ...
            </tr>
        </table>
    </HeaderTemplate>
    <%-- ... --%>
</dx:ASPxPopupControl>

Run Demo: Templates

Background Transparency

The popup control allows you to make its background transparent to create custom-shaped popup windows. For this purpose, set the ASPxPopupControl.BackColor property to ‘Transparent’ and provide the appropriate background image.

Run Demo: Transparency

You can apply the animation effect to the popup window. Use the ASPxPopupControlBase.PopupAnimationType and the ASPxPopupControlBase.CloseAnimationType property to specify the animation type.

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" PopupAnimationType="Slide" CloseAnimationType="Fade" >
    <%-- ... --%>
</dx:ASPxPopupControl>

Run Demo: Features

Drag and Drop Support

Use the ASPxPopupControlBase.DragElement property to specify which element an end user should use to drag the popup window (the ASPxPopupControlBase.AllowDragging property is set to true).

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" AllowDragging="true" DragElement="Header" >
    <%-- ... --%>
</dx:ASPxPopupControl>

Run Demo: Features

Resize Windows

Set the AllowResize property to true to allow a user to resize windows. The ResizingMode property allows you to specify how windows respond to resizing operations: it is redrawn dynamically or after the resizing operation is finished.

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" AllowResize="true" >
    <%-- ... --%>
</dx:ASPxPopupControl>

Run Demo: Features

Scrolling

Use the ScrollBars property to specify whether the popup provides scrollbars.

aspx
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" Scrollbars="Both" >
    <%-- ... --%>
</dx:ASPxPopupControl>

Run Demo: Features

Appearance Customization

The popup control allows you to customize its appearance and define style settings related to all its visual elements.

aspx
<dx:ASPxPopupControl runat="server" ID="Popup" Theme="BlackGlass" ...>
    ...
    <HeaderStyle Font-Bold="true" Font-Italic="true" ForeColor="Red" />
    <%-- ... --%>
</dx:ASPxPopupControl>

Learn more

Adaptivity

The ASPxPopupControl control supports an adaptive mode that allows you to build page layouts that fit a browser window’s width. In adaptive mode, the popup control changes its size according to a user’s device type and page resolution.

aspx
<dx:ASPxPopupControl ID="PopupControl" runat="server" >
    <SettingsAdaptivity Mode="Always" VerticalAlign="WindowCenter" MaxWidth="700px" />
    <%-- ... --%>
</dx:ASPxPopupControl>

Learn more

Run Demo: Adaptive Layout

Implements

Show 15 items

IComponent

IDisposable

IParserAccessor

IDataBindingsAccessor

IControlBuilderAccessor

IControlDesignerAccessor

IExpressionsAccessor

IAttributeAccessor

IUrlResolutionService

INamingContainer

IPostBackDataHandler

IPostBackEventHandler

IPropertiesOwner

IDataSourceViewSchemaAccessor

ICallbackEventHandler

Inheritance

Show 13 items

Object Control WebControl ASPxWebControlBase ASPxWebControl ASPxDataWebControlBase ASPxDataWebControl ASPxPopupControlBase ASPxPopupControl PivotGridDataAreaPopup

ASPxSchedulerPopupForm

BootstrapPopupControl

MVCxPopupControl

See Also

ASPxPopupControl Members

ASPxClientPopupControl

DevExpress.Web Namespace