Popup Container Editor
- 5 minutes to read
Popup Container Editor
PopupContainerEdit editors allow you to display controls within their popup windows. You can place any combination of controls onto a specially designed panel control and use this panel as the editor’s popup window. The image below shows an example.
To display controls within the editor’s dropdown window, you need to place them on an external panel represented by the PopupContainerControl control. The panel should then be assigned to the editor’s RepositoryItemPopupContainerEdit.PopupControl property. Once assigned, the panel is not visible on the form at runtime and is only displayed as the bound editor’s popup window.
Generally, you will need to synchronize an editor’s value and display text with the state of controls residing within the popup window. To update the editor’s value and text in response to changes made by end-users, handle the RepositoryItemPopupContainerEdit.QueryResultValue and RepositoryItemPopupContainerEdit.QueryDisplayText events. These events are raised when the popup window closes and changes made are not discarded. Thus, you can check the controls’ state and assign an appropriate value to the editor. For instance, to update controls within the dropdown, you may handle the RepositoryItemPopupBase.QueryPopUp event. The event is raised just before the popup window opens.
Example - Displaying a Listbox Within the Dropdown
Assume you need to display a list box control together with OK and Cancel buttons within the popup window. The list box enables end-users to select multiple items. The buttons are used to close the dropdown accepting or discarding the changes made.
As stated above, these controls should be placed onto a PopupContainerControl panel, which in turn should be assigned to the editor’s RepositoryItemPopupContainerEdit.PopupControl property.
The popup container editor’s edit value should be an array containing the list box’s selected items. The display text should reflect the number of selected items.
The form’s constructor initializes the edit value with an empty ArrayList object.
The PopupContainerEdit.QueryResultValue event handler obtains selected items and adds them to an array representing the edit value. The list box residing within the popup window is called listBox1 in the code below.
The PopupContainerEdit.QueryDisplayText event is handled to display the number of selected items, i.e. the number of items in the array stored by the edit value.
The OK and Cancel buttons should close the popup window saving or discarding changes made. Thus, their Click event handlers call the PopupBaseEdit.ClosePopup and PopupBaseEdit.CancelPopup methods respectively. The editor is obtained via the popup control’s PopupContainerControl.OwnerEdit property.
The end-user might change the selection, and then click the Cancel button or press the ESC key to discard changes. In this case, the selection is restored by obtaining the previously selected items from the editor’s edit value. The PopupBaseEdit.CloseUp event handler performs this task.
using DevExpress.XtraEditors.Controls;
public Form1() {
InitializeComponent();
//...
popupContainerEdit1.EditValue = new ArrayList();
}
private void popupContainerEdit1_QueryResultValue(object sender, QueryResultValueEventArgs e) {
//Get the list box displayed in the editor's dropdown
ListBox listBox = findChildListBox((sender as PopupContainerEdit).Properties.PopupControl);
//Add selected items to the array specified by the editor's edit value
ArrayList ar = e.Value as ArrayList;
ar.Clear();
ar.AddRange(listBox.SelectedItems);
}
private void popupContainerEdit1_QueryDisplayText(object sender, QueryDisplayTextEventArgs e) {
//Return the string representing the selected item count
int itemCount = (e.EditValue as ArrayList).Count;
e.DisplayText = itemCount.ToString() + " item(s) selected";
}
private void buttonOk_Click(object sender, System.EventArgs e) {
Control button = sender as Control;
//Close the dropdown accepting the user's choice
(button.Parent as PopupContainerControl).OwnerEdit.ClosePopup();
}
private void buttonCancel_Click(object sender, System.EventArgs e) {
Control button = sender as Control;
//Close the dropdown discarding the user's choice
(button.Parent as PopupContainerControl).OwnerEdit.CancelPopup();
}
private void popupContainerEdit1_CloseUp(object sender, CloseUpEventArgs e) {
//Restore selected items if the user's choice should be discarded
if (! e.AcceptValue) {
PopupContainerEdit popupContainerEditor = sender as PopupContainerEdit;
//Get the list box displayed in the dropdown of the popup container editor
ListBox listBox = findChildListBox(popupContainerEditor.Properties.PopupControl);
if (listBox != null) {
//Clear existing selection
listBox.ClearSelected();
//Restore selection from the editor's edit value
foreach(object o in popupContainerEditor.EditValue as ArrayList)
listBox.SetSelected(listBox.Items.IndexOf(o), true);
}
}
}
//Locates and retrieves a child ListBox control contained within the specified control
private ListBox findChildListBox(Control parent) {
foreach(Control control in parent.Controls)
if (control is ListBox) return (ListBox)control;
return null;
}