Combo Box

This demo shows how to add a combo box item to a toolbar, and update its value in response to selection changes.

As with a standard combo box, an ASPxHtmlEditor combo box provides a dropdown list with a choice of items for selection. In this demo, you can apply a specific font size to the currently selected content, by picking an appropriate combo box item.

An ASPxHtmlEditor combo box is represented by a ToolbarComboBox toolbar item. ToolbarComboBox options allow you to customize the appearance and behavior of a combo box. The most important options include:

• Items. Use this collection to add items to a dropdown list.
• DefaultCaption. Use this property to provide a text to be displayed within the edit box of a combo box when none of its items are selected.
• CommandName. Use this property to associate a command name with a combo box. You can use this command name to respond to selecting combo box items on the client side via the editor's CustomCommand client event handler. In this demo, the OnCustomCommand JavaScript function is designated as the CustomCommand client event handler (see the demo's ASPX markup file). Each time a combo box item is selected, its value (the font size specified via the item's Value property) is passed as a parameter to the OnCustomCommand function. Then, this function passes the value to the SetFontSize function, which applies the font size to the selected content.
• PropertiesComboBox. This property set provides a number of appearance and behavior options that are common to all combo box editors.

In addition to selecting font sizes, the combo box in the demo allows you to determine the font size that is applied to the currently selected content. If the applied font size matches one of the combo box's font sizes, the corresponding combo box item is automatically selected. If the selected content has a mix of font sizes, the combo box displays "Font Size" (the DefaultCaption property value), as if none of its items are selected. The combo box value is updated in response to selection changes (see the demo's OnSelectionChanged> function representing a SelectionChanged client event handler).