Example E55
Visible to All Users

Popup Control for ASP.NET Web Forms - How to show a pop-up window

This example demonstrates various ways to display a default pop-up window.

Popup window

Overview

The ASPxPopupControl creates a default pop-up window when the control's Windows collection is empty. You can change the default pop-up window's visibility on the server or client.

Set the ShowOnPageLoad property to true on the server to display the default pop-up window when a client browser loads the page.

Call one of the following client-side methods to show the default pop-up window:

Files to Look At

Documentation

More Examples

Example Code

WebSite/Default.aspx
ASPx
<%-- BeginRegion Page setup --%> <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="ASPxperience_PopupControl_HowToShowPopupControl_HowToShowPopupControl" %> <%@ Register Assembly="DevExpress.Web.v21.2" Namespace="DevExpress.Web" TagPrefix="dxcb" %> <%@ Register Assembly="DevExpress.Web.v21.2" Namespace="DevExpress.Web" TagPrefix="dxpc" %> <%@ Register Assembly="DevExpress.Web.v21.2" Namespace="DevExpress.Web" TagPrefix="dxe" %> <%-- EndRegion --%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>How to Show the ASPxPopupControl</title> <%-- BeginRegion CSS --%> <style type="text/css"> body { font-family: Tahoma; font-size: 9pt; color: #111; } .list { list-style: none; } .list li { margin-top: 15px; } .list li .separator { margin-top: 15px; height: 1px; border-bottom: 1px dashed #ccc; } #popupAnchor { width: 60px; height: 60px; border: 1px dotted #ccc; text-align: center; } .hint { color: #aaa; } strong.sub { color: #6a6a6a; } </style> <%-- EndRegion --%> <script type="text/javascript"> // Client-side popup-API function OnShowButtonClick(s, e) { popup.SetHeaderText("popup.Show()"); popup.Show(); } function OnShowAtPosButtonClick(s, e) { var popupZone = document.getElementById("popupZone"); var left = 350; var top = 350; popup.SetHeaderText("popup.ShowAtPos(" + left + ", " + top + ")"); popup.ShowAtPos(left, top); } function ShowAtElementByID(s, e) { popup.SetHeaderText("popup.ShowAtElementByID(\"popupAnchor\")"); popup.ShowAtElementByID("popupAnchor"); } // Popup via a client-side event function OnComboBoxSelectedIndexChanged(s, e) { var item = s.GetSelectedItem(); popup.SetContentHTML( "Selected item changed:<br /><br />" + "&nbsp;&nbsp;<strong>text=</strong>'" + item.text + "'<br />" + "&nbsp;&nbsp;<strong>value</strong>=" + item.value + "<br /><br />"); popup.ShowAtElementByID("comboPopupAnchor"); } // Popup notification via a callback function CallbackComplete(s, e) { // result = left;top;content text var indexOfFirstSeparator = e.result.indexOf(';'); var indexOfSecondSeparator = e.result.indexOf(';', indexOfFirstSeparator + 1) var left = parseInt(e.result.substring(0, indexOfFirstSeparator)); var top = parseInt(e.result.substring(indexOfFirstSeparator + 1, indexOfSecondSeparator)); var contentText = e.result.substr(indexOfSecondSeparator + 1); popup.SetHeaderText("Popup notification via callback"); popup.SetContentHTML(contentText); popup.ShowAtPos(left, top); } </script> </head> <body> <form id="form1" runat="server"> <%-- Popup Control --%> <dxpc:ASPxPopupControl ID="pcPopup" runat="server" ClientInstanceName="popup" EncodeHtml="false"> </dxpc:ASPxPopupControl> <ul class="list"> <%-- BeginRegion Client-side popup-API --%> <li> <strong>Client-side popup-API:</strong><br /><br /> <table> <tr> <td> <dxe:ASPxButton ID="btnShow" runat="server" Text="ASPxClientPopup.Show()" AutoPostBack="False"> <ClientSideEvents Click="OnShowButtonClick" /> </dxe:ASPxButton> </td> <td> - shows the ASPxPopupControl at a <strong>last know position</strong> (the default position is (0; 0)) </td> </tr> </table> <table> <tr> <td> <dxe:ASPxButton ID="btnShowAtPos" runat="server" Text="ASPxClientPopup.ShowAtPos(int x, int y)" AutoPostBack="False"> <ClientSideEvents Click="OnShowAtPosButtonClick" /> </dxe:ASPxButton> </td> <td> - shows the ASPxPopupControl at a point with <strong>absolute coordinates</strong> (350; 350) </td> </tr> </table> <table> <tr> <td> <dxe:ASPxButton ID="btnShowAtElementByID" runat="server" Text="ASPxClientPopup.ShowAtElementByID(string htmlElementID)" AutoPostBack="False"> <ClientSideEvents Click="ShowAtElementByID" /> </dxe:ASPxButton> </td> <td> - shows the ASPxPopupControl <strong>on the PopupAnchor element with ID="popupAnchor"</strong> </td> </tr> </table> </li> <li> <table> <tr> <td id="popupAnchor"> Popup Anchor </td> </tr> </table> <div class="separator"></div> </li> <%-- EndRegion --%> <%-- BeginRegion Popup via a client-side event --%> <li> <strong>Popup via a client-side event:</strong><br /><br /> <table> <tr> <td> <dxe:ASPxComboBox ID="cbCombo" runat="server" Width="170px" ClientInstanceName="combo"> <ClientSideEvents SelectedIndexChanged="OnComboBoxSelectedIndexChanged" /> <Items> <dxe:ListEditItem Text="Item #1" Value="0" /> <dxe:ListEditItem Text="Item #2" Value="1" /> <dxe:ListEditItem Text="Item #3" Value="2" /> </Items> </dxe:ASPxComboBox> </td> <td id="comboPopupAnchor"> <span class="hint">(select an item)</span> </td> </tr> </table> <div class="separator"></div> </li> <%-- EndRegion --%> <%-- BeginRegion Popup via a server-side event --%> <li> <strong>Popup via a server-side event:</strong><br /><br /> <strong class="sub">Popup with an absolute position setting on the server side:</strong><br /><br /> <table> <tr> <td> <dxe:ASPxListBox ID="lbList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="OnListBoxSelectedIndexChanged" Height="70px"> <Items> <dxe:ListEditItem Text="Item #1" Value="0" /> <dxe:ListEditItem Text="Item #2" Value="1" /> <dxe:ListEditItem Text="Item #3" Value="2" /> </Items> </dxe:ASPxListBox> </td> <td> <span class="hint">(select an item)</span> </td> </tr> </table> </li> <li> <strong class="sub">Popup on an element with DI="radioButtonListPopupAnchor":</strong><br /><br /> <table> <tr> <td> <dxe:ASPxRadioButtonList ID="rblRadioButtonList" runat="server" OnSelectedIndexChanged="OnRadioButtonListSelectedIndexChanged" AutoPostBack="True"> <Items> <dxe:ListEditItem Text="Radio Item #1" Value="0" /> <dxe:ListEditItem Text="Radio Item #2" Value="1" /> </Items> </dxe:ASPxRadioButtonList> </td> <td id="radioButtonListPopupAnchor"> <span class="hint">(select an item)</span> </td> </tr> </table> <div class="separator"></div> </li> <%-- EndRegion --%> <%-- BeginRegion Popup notification via a callback --%> <li> <strong>Popup notification via a callback:</strong><br /><br /> <table> <tr> <td> <dxcb:ASPxCallback ID="clbCallback" runat="server" ClientInstanceName="callback" OnCallback="OnCallback"> <ClientSideEvents CallbackComplete="CallbackComplete" /> </dxcb:ASPxCallback> <table> <tr> <td valign="top" style="padding-top: 6px;"> Popup's left position: </td> <td> <table> <tr> <td> <dxe:ASPxSpinEdit ID="spnLeft" runat="server" Width="60px" Height="21px" Number="600" MinValue="0" MaxValue="2000" AllowNull="False"> </dxe:ASPxSpinEdit> </td> <td> px </td> </tr> </table> </td> </tr> <tr> <td valign="top" style="padding-top: 6px;"> Popup's top position: </td> <td> <table> <tr> <td> <dxe:ASPxSpinEdit ID="spnTop" runat="server" Width="60px" Height="21px" Number="500" MinValue="0" MaxValue="2000" AllowNull="False"> </dxe:ASPxSpinEdit> </td> <td> px </td> </tr> </table> </td> </tr> <tr> <td valign="top" style="padding-top: 6px;"> Content Text: </td> <td> <dxe:ASPxMemo ID="txtContentText" runat="server" Columns="40" Rows="4" Text="Default Content Text"> </dxe:ASPxMemo> </td> </tr> </table> <br /> <table style="width: 100%;"> <tr> <td align="center"> <dxe:ASPxButton ID="btnSendCallback" runat="server" Text="Send Callback" Width="200px" AutoPostBack="False"> <ClientSideEvents Click="function(s, e) { callback.SendCallback(); }" /> </dxe:ASPxButton> </td> </tr> </table> </td> </tr> </table> </li> <%-- EndRegion --%> </ul> </form> </body> </html>
WebSite/Default.aspx.cs(vb)
C#
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using DevExpress.Web; public partial class ASPxperience_PopupControl_HowToShowPopupControl_HowToShowPopupControl : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void OnListBoxSelectedIndexChanged(object sender, EventArgs e) { ListEditItem selectedItem = ((ASPxListBox)sender).SelectedItem; pcPopup.Left = 400; pcPopup.Top = 600; pcPopup.Text = string.Format("Selected item chaged:<br /><br /><strong>text</strong>='{0}'<br /><strong>value</strong>={1}<br />", selectedItem.Text, selectedItem.Value); pcPopup.ShowOnPageLoad = true; } protected void OnRadioButtonListSelectedIndexChanged(object sender, EventArgs e) { ListEditItem selectedItem = ((ASPxRadioButtonList)sender).SelectedItem; pcPopup.Text = string.Format("Selected item chaged:<br /><br /><strong>text</strong>='{0}'<br /><strong>value</strong>={1}<br />", selectedItem.Text, selectedItem.Value); pcPopup.ClientSideEvents.Init = @"function(s, e) { s.ShowAtElementByID('radioButtonListPopupAnchor'); }"; } protected void OnCallback(object source, DevExpress.Web.CallbackEventArgs e) { e.Result = string.Format("{0};{1};{2}", spnLeft.Number, spnTop.Number, txtContentText.Text); } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.