The RadColorPicker control integrates seamlessly into RadRadialMenu to provide you an easy way to
include color selection functionality into your context menu. In this help article you will find instructions and explanations on how to create a
menu item that expands into a color picker control.
To add a RadColorPicker in RadRadialMenu, you need to specify it as a menu item in the
items property. Below is a list of simple steps that will guide you through the available configuration.
Create a menu item with a type property value of Telerik.UI.RadialMenu.ColorPickerItem:
This is the only mandatory step you need to do. With this property configured the radial menu will render a menu item with a pipette,
showing the currently selected color, as an icon and upon tapping the expand button, a color picker popup will appear on top of the menu. The
default color picker is RadHSBPicker. The next steps explain how you can configure the menu item and the color picker
|Code Listing 1: Menu Item of Type RadColorPicker ||Copy|
Configure the menu item: The color picker menu item is a specific type of menu item and it brings some restrictions.
For example, it cannot have child menu items, cannot be selectable and cannot be in a group. Other than these, you can set all other regular menu
items properties and customize the menu item. You can find descriptions and usage examples of the various menu items properties in this article:
Configure RadRadialMenu Menu Items.
|Code Listing 2: RadColorPicker Menu Item Properties ||Copy|
text: 'Pick a Color',
tooltip: 'Expand the menu item to enter color selection'
Configure the RadColorPicker: The color picker menu item has one additional property, named
colorPicker, that enables you to configure the color picker control. The property takes a RadColorPicker
options object identical to one needed by RadColorPicker in popup mode and the configuration options are just the same. Here
is a link to the article that describes the color picker control configuration in popup mode:
Configure RadColorPicker in Popup Mode.
|Code Listing 3: Menu Item RadColorPicker Configuration ||Copy|
Below you can see an image of RadRadialMenu with an integrated RadColorPicker. Note that upon clicking the expand
button, the color picker is displayed on top of the menu.