Tab

ASPxPopupControl Class

A popup control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v21.1.dll

Declaration

public class ASPxPopupControl :
    ASPxPopupControlBase,
    IControlDesigner

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.

PopupControl Control

Create a Popup Control

Design Time

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

PopupControl in Toolbox

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

NOTE

To properly function, DevExpress controls require that special modules, handlers and options are registered in the the Web.config file. Switch the Microsoft Visual Studio IDE to the Design tab to automatically update the Web.config file with the required DevExpress information.

<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

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;
}

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

See demo

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.

Declaratively:

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

In code:

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);
}

Learn more

Data Binding

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

<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 | See demo

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.

<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