Drop-down Item Picker

This demo shows how to extend toolbars with dropdown item pickers.

A dropdown item picker represents a button with a dropdown, containing a list of items available for selection. To select an item, users can hover the mouse pointer over a button or click it to open its dropdown list and then select an item within the list. In this demo, you can insert smilies and special symbols to the editor's content via corresponding dropdown item pickers.

In ASPxHtmlEditor toolbars, a dropdown item picker is represented by a ToolbarDropDownItemPicker toolbar item. This item provides a number of options that allow you to customize the appearance and behavior of a dropdown item picker. The most important options include:

• Items. Use this collection to add items to a dropdown list.
• ColumnCount. Use this property to specify the number of columns in which items are arranged within a dropdown list.
• ItemHeight and ItemWidth. Use these properties to adjust the item size.
• Image property set. Allows you to define images to be displayed within the ToolbarDropDownItemPicker toolbar item.
• ImagePosition. You can display a caption and/or an image within a list item. The element to display is determined automatically, based upon a list item's Text and Image.Url property values. To customize a list item's image alignment, use an item picker's ImagePosition property. Also, a list item can be assigned a tooltip and value via the ToolTip and Value properties, respectively.

• ClickMode. Use this property to specify the response to clicks on the ToolbarDropDownItemPicker toolbar item. The following options are available.

  • ShowDropDown. Determines that a click on an item picker invokes a dropdown list with the available options.
  • ExecuteAction. Specifies that a click on an item picker executes a command associated with it via its CommandName property, and implemented using the CommandExecuted event.
  • ExecuteSelectedItemAction. This value is used by default. It specifies that a click on an item picker executes an action associated with an item being currently selected within a dropdown list. In this mode, a toolbar button displays the recently selected item's image or caption (see the Insert Smiley item picker). This allows users to select this item by clicking the button, rather than opening a dropdown and selecting the item again. To specify the initially selected item, use an item picker's SelectedItemIndex property.
• CommandName. Use this property to associate a command name with an item picker. You can use this command name to respond to item picker clicks on the client side via the editor's CustomCommand client event handler. In this demo, the OnCommandExecute JavaScript function is designated as the CustomCommand client event handler (see the demo's ASPX markup file). Each time a list item or dropdown button is clicked, the selected item's value (specified via its Value property) is passed as a parameter to the OnCommandExecute function. Then, this function passes the value to the InsertSmiley or InsertSpecialSymbol function, which handles clicks within a corresponding item picker.