Telerik UI for Windows 8 HTML

RadColorPicker for Windows 8 HTML is an HTML/JavaScript component that is a combination of three different color picker controls you can choose from. Each control offers a different color selection model.

  • RadHSBPicker: The user can select a color by its hue, saturation, and brightness values.

  • RadRGBPicker: The user can select a color by its red, blue, and green component values.

  • RadPalettePicker: The user can select a color from a predefined subset of colors.

This topic contains the following sections.

Prerequisites

Before you declare a Telerik control in your application, make sure that you have added the references to the needed JavaScript and CSS resources, as described here:

Adding Telerik UI for Windows 8 HTML to an HTML Page

Creating a RadColorPicker

Creating a RadColorPicker is identical to all other Telerik UI for Windows 8 HTML components. To initialize a RadColorPicker in the markup, create an empty div element and set it's data-win-control attribute value to Telerik.UI.RadHSBPicker, Telerik.UI.RadRGBPicker, or Telerik.UI.RadPalettePicker. This will result in an inline color picker control.

Code Listing 1: Inline Color Picker Mark-up Declaration Copy imageCopy
<div data-win-control="Telerik.UI.RadHSBPicker"></div>

You can also initialize a RadColorPicker programmatically by first creating the empty div element with an id in the markup and then passing it to the RadColorPicker's constructor in JavaScript.

Code Listing 2: Mark-up Copy imageCopy
<div id="colorPicker"></div>
Code Listing 3: Color Picker JavaScript Declaration Copy imageCopy
var colorPicker = new Telerik.UI.RadRGBPicker(document.getElementById("colorPicker"));

Setting RadColorPicker Options

Like all other Windows Runtime JavaScript controls, the color picker options can be defined trough the data-win-options attribute.

Code Listing 4: Setting Options in the Mark-up Copy imageCopy
<div data-win-control="Telerik.UI.RadHSBPicker" data-win-options="{
        width: 400,
        opacity: true
    }"></div>

You can also set the options programmatically by passing the options object as a second argument to the color picker's constructor in JavaScript.

Code Listing 5: Mark-up Copy imageCopy
<div id="myColorPicker"></div>
Code Listing 6: Setting Options in JavaScript Copy imageCopy
var myColorPicker = new Telerik.UI.RadRGBPicker(document.getElementById("myColorPicker"), {
    width: 400,
    opacity: true
});

Creating RadColorPicker as a Pop-up

If you want to have the control as a pop-up with an expand button, set the data-win-control attribute value to Telerik.UI.RadColorPicker and set a value to the mode property. Possible property values are 'hsb', 'rgb' and 'palette'. The default property value is 'hsb'.

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

Note that the properties you can set to a control initialized with Telerik.UI.RadColorPicker depend on the value of the mode property. For example, the brightness property will work only on HSB pickers and the opacity property will work only on HSB and RGB pickers. For information about each color picker's configuration properties refer to the related resources at the bottom of this article.

Referencing RadColorPicker Control Instance

At some point you might need to access the control in JavaScript to modify properties or get data. If RadColorPicker has been initialized in the mark-up, you will need to get a reference to it. As described in this MSDN article about adding controls to a Windows Store app, any control in a Windows Runtime JavaScript application requires a call to WinJS.UI.processAll() for proper initialization. The same holds true for any of the Telerik UI controls. Once, the WinJS framework has initialized all the controls on the page, the RadColorPicker control instance associated with a host HTML element can be retrieved using the winControl expando property of the host HTML element.

Code Listing 8: Getting RadColorPicker Control Reference Copy imageCopy
args.setPromise(WinJS.UI.processAll().then(function () {
    //wait for the processAll() method to finish, then find the
    //color picker control from the host element's winControl property
    var colorPickerElement = document.getElementById("colorPicker");
    var colorPickerControl = colorPickerElement.winControl;
    console.log(colorPickerControl instanceof Telerik.UI.RadHSBPicker); // true
}));

Modifying RadColorPicker Properties

Once the RadColorPicker control is loaded an referenced in the JavaScript, it exposes a set of properties that you can use to modify the color picker's selection or appearance.

Code Listing 9: Modifying RadColorPicker Properties Copy imageCopy
colorPickerControl.value = '#54FF3A';
colorPickerControl.brightness = 245;
colorPickerControl.width = 400;

To see all configuration options for each color picker, refer to the related articles at the bottom of the article.

Attaching Events

You can add an event handler declaratively in the options object either in the mark-up or in the control's constructor in JavaScript.

Code Listing 10: Adding Event Handlers Declaratively Copy imageCopy
var myColorPickerEvents = new Telerik.UI.RadHSBPicker(document.getElementById("myColorPickerEvents"), {
    onselect: function (e) {
        //..
    }
});
Note

You can also declare event handlers in HTML mark-up in the data-win-options attribute. To do that you need to mark the handler function as safe in your code, using the WinJS.Utilities.markSupportedForProcessing function.

Alternatively, you can add an event handler programmatically after the control has been initialized.

Code Listing 11: Adding Event Handlers Dynamically Copy imageCopy
myColorPickerEvents.addEventListener("select", function (e) {
    //..
});

See Also