Telerik UI for Windows 8 HTML

RadColorPicker can be used as an inline control or a popup with a built-in expand button. The following article will provide explanations and examples of how you can create color pickers in popup mode.

This topic contains the following sections.

Initializing a Popup Color Picker

To create a color picker in popup mode, initialize the control as Telerik.UI.RadColorPicker and set a value for the mode property. The available property values are 'hsb', 'rgb' and 'palette'. The default property value is 'hsb'.

Code Listing 1: Popup Color Picker Mark-up Declaration Copy imageCopy
<div data-win-control="Telerik.UI.RadColorPicker" data-win-options="{
        mode: 'hsb'
    }"></div>

In popup mode the color picker is visualized as a popup button with a pipette. The pipette is colored in the selected color so the user can see the selection without expanding the control. On click the color picker is expanded. To collapse the color picker, the user has to click outside of the control.

colorpicker-popup

Setting the Popup Color Picker Properties

You can set all properties of all color pickers to Telerik.UI.RadColorPicker, but only the ones that are enabled for the current color picker will take effect. For example, the palette property will work only if the mode is set to 'palette'. If you set a palette property to a HSB picker, it will not take effect, but if you later change the mode dynamically to a palette picker, the palette property will become active for this picker. For information regarding each color picker's configurable properties visit the related topics links at the bottom of this article.

Code Listing 2: Setting Popup Color Picker Properties Copy imageCopy
<div id="popupPicker" data-win-control="Telerik.UI.RadColorPicker" data-win-options="{
        mode: 'rgb',
        opacity: true,
        opacityValue: 0.5,
        transitions: false,
        palette: ['#000000', '#FF0000', '#FFD800', '#4CFF00', '#00FFFF', '#0026FF', '#B200FF', '#ffffff']
    }"></div>
Code Listing 3: Changing the Popup Color Picker Mode Copy imageCopy
var popupPicker = Telerik.UI.find.ColorPicker("#popupPicker");
popupPicker.mode = 'palette';

Note that in popup mode the transitions property also affects the expand/collapse animations of the color pickers. In this mode, you can set the property value for the palette color picker as well.

See Also