Telerik UI for Windows 8 HTML

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.

  1. 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 control itself.

    Code Listing 1: Menu Item of Type RadColorPicker Copy imageCopy
    items: [
        {
            id: 'ColorPicker',
            type: Telerik.UI.RadialMenu.ColorPickerItem
        }
    ]
    
  2. 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 imageCopy
    items: [
        {
            id: 'ColorPicker',
            type: Telerik.UI.RadialMenu.ColorPickerItem,
            text: 'Pick a Color',
            tooltip: 'Expand the menu item to enter color selection'
        }
    ]
    
  3. 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 imageCopy
    items: [
        {
            id: 'ColorPicker',
            type: Telerik.UI.RadialMenu.ColorPickerItem,
            colorPicker: {
                mode: 'palette',
                width: 275
            }
        }
    ]
    

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.

Figure 1: RadRadialMenu with a RadColorPicker
radialmenu-howto-colorpicker