DevExpress Blazor DropDownBox is a highly customizable editor that can display any UI element within its drop-down window. These includ simple lists, trees, grids, or a combination of multiple elements. The editor's input element is read-only for users. You can assign an editor value programmatically based on user interaction with window content.

Place the drop-down window content in the DropDownBodyTemplate template.

In this demo, the editor's drop-down window contains a DxListBox component that allows multi-item selection. When a user changes selection, the corresponding value is assigned to the DropDownBox Value property.

The QueryDisplayText property allows you to define how the editor value is displayed in the input element.

In this demo, the DropDownBox editor contains a fully-functional DevExpres Blazor Grid control. The control displays a search box.

The editor's Value property is bound to a data item that corresponds to the selected grid row. When grid selection changes, the DxGrid.SelectedDataItemChanged event handler assigns a new data item to the editor value and calls the HideDropDown method.

The DropDownBox editor implements templates for three sections of the drop-down window area:

• DropDownHeaderTemplate: Specifies a template for the drop-down window's header area.
• DropDownBodyTemplate: Specifies a template for the drop-down window's body. In this demo, editors in the template allow users to select text format settings.
• DropDownFooterTemplate: Specifies a template for the drop-down window's footer region. In this demo, the template contains two DxButton components that allow users to apply or cancel changes.

This demo uses the editor's Value property to store text format settings as a FontProperties object. The QueryDisplayText function concatenates FontProperties object field values. The editor displays the resulting string in the input element.

The DropDownClosing event fires when a user closes the drop-down window. This demo handles this event to reset editor values.

Note: You must enclose your code between BeginUpdate and EndUpdate method calls to set editor value/other settings in code.

In this demo, the Color Palette component is integrated into our Blazor DropDownBox UI component.