ASPxPopupControl.PopupElementID Property
Gets or sets the ID of a web control or HTML element (or a list of IDs) with which the default popup window is associated.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v20.2.dll
NuGet Package: DevExpress.Web
Declaration
Property Value
| Type | Default | Description |
|---|---|---|
| String | String.Empty | A string value specifying the ID (or a list of IDs) of the web control or HTML element with which the default popup window is associated. |
Remarks
Use the PopupElementID property to specify the web control or HTML element whose specific mouse action defined via the ASPxPopupControl.PopupAction property invokes the default popup window. You can also specify a list of control IDs separated by the semicolon (;).
PopupElementID="ASPxButton1;ASPxButton2;ASPxButton3;ASPxButton4"
Note
- If the ASPxPopupControl.Windows collection is not empty, the PopupElementID property is not in effect and cannot be used to specify a common HTML element for all popup windows. In this case, you should use the PopupWindow.PopupElementID property of individual popup windows from the collection.
The PopupElementID property should match an HTML element id.
protected void ASPxPopupControl1_Load (object sender, EventArgs e) {
ASPxPopupControl1.PopupElementID = ASPxTextBox1.ClientID;
}
To specify this value on the client side, use the ASPxClientPopupControl.SetPopupElementID method.
Example
This example demonstrates how nested popup windows can be displayed using the ASPxPopupControl.
function KeyHandler(e) {
if (e.keyCode == 27)
if (window2.IsVisible())
window2.Hide();
else if (window1.IsVisible())
window1.Hide();
else
return false;
return true;
}
<head id="Head1" runat="server">
<title>Nested modal windows</title>
</head>
<body id="body" onkeydown="return KeyHandler(event);">
<form id="form1" runat="server">
<dx:ASPxPopupControl ID="window1" runat="server" Modal="true" HeaderText="First Window"
PopupElementID="body" ClientInstanceName="window1" CloseAction="CloseButton" PopupAction="None"
PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" AllowDragging="True">
<ContentCollection>
<dx:PopupControlContentControl runat="server">
<dx:ASPxButtonEdit ID="ASPxButtonEdit1" runat="server"
Text="Click Ellipsis Button to open Second Modal Window">
<Buttons>
<dx:EditButton></dx:EditButton>
</Buttons>
<ClientSideEvents ButtonClick="function(s, e) {
window2.Show();
}" />
</dx:ASPxButtonEdit>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl><dx:ASPxPopupControl ID="window2" runat="server" Modal="true"
HeaderText="Second Window" PopupElementID="ASPxButtonEdit1"
ClientInstanceName="window2"
CloseAction="CloseButton" PopupAction="None" PopupHorizontalAlign="WindowCenter"
PopupVerticalAlign="WindowCenter" AllowDragging="True">
<ContentCollection>
<dx:PopupControlContentControl>
<dx:ASPxDateEdit ID="ASPxDateEdit1" runat="server">
</dx:ASPxDateEdit>
<dx:ASPxButton ID="ASPxButton2" runat="server" AutoPostBack="False"
Text="Close" >
<ClientSideEvents Click="function(s, e) {
window2.Hide();
}" />
</dx:ASPxButton>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
<br/>
<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False"
Text="Open First Window">
<ClientSideEvents Click="function(s, e) {
window1.Show();
}" />
</dx:ASPxButton>
</form>
</body>
Related GitHub Examples
The following code snippets (auto-collected from DevExpress Examples) contain references to the PopupElementID property.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.