Telerik UI for Windows 8 HTML

This article describes the events fired by RadColorPicker, their usage and most notable event arguments.

Event Name

Description

Arguments

change

Fires when the selection is changed. This event is not fired if a color is selected programmatically.

e.target - The RadColorPicker control that the user is manipulating. e.detail.value - The value of the RadColorPicker control that the user is manipulating.

select

Fires when the user drags through the available colors.

e.target - The RadColorPicker control that the user is manipulating. e.detail.value - The value of the RadColorPicker control that the user is manipulating.

expand

Fired only if the color picker is in popup mode. Fires when the popup button is clicked and the color picker is expanded.

e.target - The RadColorPicker control that has expanded.

collapse

Fired only if the color picker is in popup mode. Fires when the color picker is collapsed by clicking outside of the control when it is expanded.

e.target - The RadColorPicker control that has collapsed.

Here is an example of using the select event to change the CSS font color style of a span element.

Code Listing 1: Sample Mark-up Copy imageCopy
<div id="myColorPickerEvents"></div>
<span id="selectedColor">The selected color</span>
Code Listing 2: Attaching Events Copy imageCopy
var myColorPickerEvents = new Telerik.UI.RadHSBPicker(document.getElementById("myColorPickerEvents"), {
    onselect: function (e) {
        document.getElementById("selectedColor").style.color = e.detail.value;
    }
});