ASPxPopupControl.PopupElementID Property

Specifies the ID of a web control or HTML element associated with the default pop-up window.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v23.2.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue("")]
public string PopupElementID { get; set; }

VB.NET

<DefaultValue("")>
Public Property PopupElementID As String

Property Value

Type	Default	Description
String	String.Empty	A string value that specifies the ID or a list of IDs separated by a semicolon (;).

Remarks

Use the PopupElementID property to specify the web control or HTML element that invokes the default pop-up window when a user clicks or hover over it. The PopupAction property specifies the specific mouse action that invokes the window.

You can specify a list of control IDs separated by the semicolon (;).

ASPX

PopupElementID="ASPxButton1;ASPxButton2;ASPxButton3;ASPxButton4"

Run Demo: Popup Control - Multiple Invoker Elements

If the Windows collection is not empty, the PopupElementID property is not in effect. In this case, use the PopupWindow.PopupElementID property of individual pop-up windows in the collection.

The PopupElementID property should match an HTML element’s ID.

C#

protected void ASPxPopupControl1_Load (object sender, EventArgs e) {
    ASPxPopupControl1.PopupElementID = ASPxTextBox1.ClientID;
}

VB.NET

Protected Sub ASPxPopupControl1_Load(ByVal sender As Object, ByVal e As EventArgs)
    ASPxPopupControl1.PopupElementID = ASPxTextBox1.ClientID
End Sub

On the client side, use the SetPopupElementID(popupElementId) method to specify the associated element’s ID.

If the HTML element specified by the PopupElementID property is re-created in the DOM on callbacks, you should call the RefreshPopupElementConnection method to re-initialize connections between the element and the window.

JS

function onEndCallback(s, e) {
    menu_popup.RefreshPopupElementConnection();
}

ASPX

<dx:BootstrapPopupMenu ... PopupElementCssSelector=".menu-button" ClientInstanceName="menu_popup">
</dx:BootstrapPopupMenu>

<dx:BootstrapCardView ...>
    <ClientSideEvents EndCallback="onEndCallback" />
    <Templates>
        <CardHeader>
            ...
            <dx:BootstrapButton ... AutoPostBack="false" data-id='<%#Eval("EmployeeID")%>'>
                <CssClasses Control="menu-button" ... />
            </dx:BootstrapButton>
        </CardHeader>
    </Templates>
</dx:BootstrapCardView>

Related GitHub Examples

The following code snippet (auto-collected from DevExpress Examples) contains a reference 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.

C#

asp-net-web-forms-grid-delete-confirm-dialog-with-dont-ask-me-again-option/CS/Solution/Default.aspx.cs#L25

// Make the ASPxPopupControl displayed centered within the ASPxGridView
ASPxPopupControl1.PopupElementID = "ASPxGridView1";
ASPxPopupControl1.PopupHorizontalAlign = DevExpress.Web.PopupHorizontalAlign.Center;

VB.NET

asp-net-web-forms-grid-delete-confirm-dialog-with-dont-ask-me-again-option/VB/Solution/Default.aspx.vb#L26

'Make the ASPxPopupControl displayed centered within the ASPxGridView
ASPxPopupControl1.PopupElementID = "ASPxGridView1"
ASPxPopupControl1.PopupHorizontalAlign = DevExpress.Web.PopupHorizontalAlign.Center