Popup Container Editor

• Nov 18, 2019
• 2 minutes to read

PopupContainerEdit and PopupContainerControl controls allow you to create popups/dropdowns with custom layout and use them within look-up editors and data editors with popups (dropdowns):

Run Demo: Popup Container Edit

Popup Container Control

The PopupContainerControl is a panel/container that displays various UI controls and is used as the dropdown in the PopupContainerEdit control. Do the following to use it:

1. Drop UI controls onto the PopupContainerControl. To add UI control in code, use the PopupContainerControl.Controls property.
2. Assign the PopupContainerControl to the PopupContainerEdit.Properties.PopupControl property.

Popup Container Edit

The PopupContainerEdit is a textbox-like data editor with the dropdown button. When the user clicks the dropdown button, the PopupContainerControl assigned to the editor’s PopupContainerEdit.Properties.PopupControl property is shown.

EditValue and Display Text

Set the EditValue

Handle the QueryResultValue event to specify the e.Value event parameter to set the editor’s value.

Set the Display Text

Handle the QueryDisplayText event and set the e.DisplayText event parameter to specify the text displayed in the edit box. If you do not handle the QueryDisplayText event, the PopupContainerEdit will try to convert its EditValue into a string.

C#

void popupContainerEdit1_QueryDisplayText(object sender, DevExpress.XtraEditors.Controls.QueryDisplayTextEventArgs e) {
    e.DisplayText = string.Format("{0} - {1} - {2}; {3}", textEdit1.Text, textEdit2.Text, textEdit3.Text, dateEdit1.DateOnly); 
}

VB.NET

Private Sub popupContainerEdit1_QueryDisplayText(ByVal sender As Object, ByVal e As DevExpress.XtraEditors.Controls.QueryDisplayTextEventArgs)
    e.DisplayText = String.Format("{0} - {1} - {2}; {3}", textEdit1.Text, textEdit2.Text, textEdit3.Text, dateEdit1.DateOnly)
End Sub

The following screenshot shows the result:

Display OK/Cancel Buttons

1. Add OK and Cancel buttons to the PopupContainerControl.
2. Handle the Ok button’s Click event to call the ClosePopup() method.
3. Handle the Cancel button’s Click event to call the CancelPopup() method.

C#

void ButtonCancel_Click(object sender, EventArgs e) {
    popupContainerEdit1.CancelPopup();
}
void ButtonOK_Click(object sender, EventArgs e) {
    popupContainerEdit1.ClosePopup();
}

VB.NET

Private Sub ButtonCancel_Click(ByVal sender As Object, ByVal e As EventArgs)
    popupContainerEdit1.CancelPopup()
End Sub
Private Sub ButtonOK_Click(ByVal sender As Object, ByVal e As EventArgs)
    popupContainerEdit1.ClosePopup()
End Sub

Popup Events

• QueryPopUp - fires when the user clicks the dropdown button. Handle the QueryPopUp event to perform specific actions before the dropdown is displayed. For example, you can prevent the dropdown from being displayed based on a specific condition. Set the e.Cancel event parameter to true to cancel the action.
• CloseUp - fires if the user closes the popup panel or presses ESC to discard edits.

Examples (GitHub)

• How to Implement Multiple Selection for GridLookUpEdit
• How to Emulate an Editable GridLookUpEdit with PopupContainerEdit