[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Collapse]Editors and Simple Controls
    Included Controls and Components
   [Expand]Common Editor Features and Concepts
   [Expand]Lookup Editors
    Popup Container Editor
   [Expand]Token Edit Control
   [Expand]Breadcrumb Edit Control
   [Expand]Range Control
   [Expand]Image Slider
    Camera Control
    Templated ListBox Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Popup Container Editor

DevExpress WinForms controls suite includes multiple look-up editors and editors with popup panels. All of these editors have a predefined layout. For instance, the TreeListLookUpEdit editor displays a TreeListControl in its popup window: you can only tweak this TreeList, but not replace it with another control. If you need a custom popup window layout, or the control embedded in a standard lookup editor's popup window cannot be edited in the way you need it, create a custom editor with the PopupContainerEdit / PopupContainerControl controls combo.



A textbox-like editor with a drop-down button. When a user clicks this button, a PopupContainerControl assigned to the editor's RepositoryItemPopupContainerEdit.PopupControl property is shown. If no panel was assigned to this property, the button does nothing.

A panel available from the Visual Studio Toolbox as a separate control. Drop any controls onto this panel, then assign it to a RepositoryItemPopupContainerEdit.PopupControl property. To populate this panel in code, add controls to the panel Controls collection.

Expanded Example 1: Create a lookup editor with a RichTextBox within

The following example creates a PopupContainerControl with a RichTextBox inside, and assigns this control to a PopupContainerEdit editor.

Expanded EditValue and Display Text. Editor Events

As any other DevExpress Editor, the PopupContainerEdit has an EditValue property that stores the actual editor value, and the Text property - the currently displayed editor text. Since you can build any popup panel layout, the editor cannot automatically retrieve values for these two properties, and you have to handle events to provide them.

The following figure illustrates the Popup Container Edit demo available in the DevExpress Demo Center.

The "popupContainerControlSample" is a popup panel for the "popupContainerEditSample" editor. The "popupContainerControlSample" contains three editors:

The "lbSample" label contains a sample text written with the font selected in the "popupContainerEditSample" editor. This is a two-way relation: when you open the editor popup window, font selectors focus values depending on the current label font. When you change font selector values, selected font settings are applied to the label.

Current font is stored in the helper "CurrentFont" class.

The list below illustrates main editor events that you should handle to provide a similar functionality.

  • PopupBaseEdit.QueryPopUp - fires when a user clicks the editor drop-down button. Allows you to perform specific actions or forcibly close the popup panel. In the demo module, the QueryPopUp event handler reads the current "lbSample" font and selects corresponding font selectors' values.
  • RepositoryItemPopupContainerEdit.QueryResultValue - allows you to set the editor's EditValue. In the demo module, a new CurrentFont object is created from current font selector values. The custom "CurrentFontCaption" method assigns the string representation of this object to the EditValue.
  • RepositoryItemPopupContainerEdit.QueryDisplayText - allows you to set a custom editor text. If you do not handle this event, the editor will try to convert its EditValue into a string, and display the result. In this demo, the QueryDisplayText event is not handled and the display text matches the EditValue. The code sample below illustrates how to invert this EditValue (e.g., if the EditValue is "Tahoma, 8.5, Bold" the editor display text is "Bold, 8.5, Tahoma").
  • PopupBaseEdit.CloseUp - fires if a user closes the popup panel or presses the ESC key to discard all edits.

Expanded Add Buttons

If you need buttons that should apply and\or discard edits made in the popup window, handle their Click events and call the PopupBaseEdit.ClosePopup and PopupBaseEdit.CancelPopup methods.

The code below illustrates how to create an editor that shows a ListBox in its popup window. The PopupContainerControl panel has "OK" and "Cancel" buttons.

Expanded Example 2: Create a GridLookUpEdit analogue that allows users to select multiple values

The GridLookUpEdit control is a lookup editor that displays a GridControl (see GridControl) in its popup panel. This editor allows users to select only one Grid row at a time. If you need the multi-select functionality, create a custom PopupContainerEdit editor with a GridControl in its PopupContainerControl.

The code below illustrates how to retrieve selected Grid rows, convert them to comma-separated values (CSVs), and pass them to the editor's EditValue.

Vice versa, when a user enters values into the editor's textbox, the Grid should select rows that match these values. The code below illustrates how to do this.

Complete sample on GitHub: How to provide the MultiSelect functionality for GridLookUpEdit

See also: How to emulate an editable GridLookUpEdit with PopupContainerEdit

Is this topic helpful?​​​​​​​