Telerik UI for Windows 8 HTML

This article will introduce you to the properties of RadPalettePicker and will provide explanations of their use.

This topic contains the following sections.

Setting the Size of the Control

RadPalettePicker has a circular shape and its size is controlled by the width property, which represents the diameter of the circle in pixels. The default property value is 430 and the control does not have minimal value.

Code Listing 1: Setting a Size in the Mark-up Copy imageCopy
<div data-win-control="Telerik.UI.RadPalettePicker" data-win-options="{
        width: 250
    }"></div>

Alternatively, you can set the control's size by specifying a value for the sectorWidth property. The value of the property represents the length of the outer arc of the sector in pixels. The diameter of the color picker and the sector angles will be auto generated based on the sector width and the number of sectors.

Code Listing 2: Setting a Sector Size in the Mark-up Copy imageCopy
<div data-win-control="Telerik.UI.RadPalettePicker" data-win-options="{
        sectorWidth: 100
    }"></div>

You can also use these properties in the code-behind to get or set the size of the color picker.

Code Listing 3: Getting and Setting the Size in the Code-behind Copy imageCopy
palettePickerControl.width = 400;
var width = palettePickerControl.width;

palettePickerControl.sectorWidth = 120;
var width = palettePickerControl.sectorWidth;

Setting a Color Palette

A color palette is a finite set of colors the user can choose from. To specify a palette, use the palette property. It takes an array of sectors with colors. Each sector can contain a single color, an array of colors or a color step object for generating a gradation of colors. The colors can be represented by strings (hex, RGB, or RGBA format) or Telerik.Utilities.color objects.

Code Listing 4: Setting a Palette with Single Colors Copy imageCopy
<div data-win-control="Telerik.UI.RadPalettePicker" data-win-options="{
        palette: ['#000000', '#FF0000', '#FFD800', '#4CFF00', '#00FFFF', '#0026FF', '#B200FF', '#ffffff']
    }"></div>

Figure 1: RadPalettePicker with Simple Color Sectors.

colorpicker-palette-simple

When you set an array of colors to a sector, the sector is divided, so that all of them are displayed in that sector.

Code Listing 5: Setting a Palette with Arrays of Colors Copy imageCopy
<div data-win-control="Telerik.UI.RadPalettePicker" data-win-options="{
        palette: [
            ['#74ACCF', '#3D77A6', '#2F567C', '#1D2B44', '#131A2B'],
            ['#B3F0C7', '#D4FFA0', '#46804D', '#121F18', '#070908'],
            ['#D6D3C2', '#E5D15F', '#C5A800', '#C5B86B', '#7E785A'],
            ['#F1B147', '#C17C21', '#AC6515', '#763E0B', '#5A2C0B'],
            ['#FFD4D3', '#FFA3A0', '#FF7C7C', '#E94F4F', '#B73E3E'],
            ['#D875AA', '#B15587', '#C12A7B', '#872F5E', '#511D39']
        ]
    }"></div>

Figure 2: RadPalettePicker with Multiple Colors in a Sector.

colorpicker-palette-array-colors

If you want to display a palette of similar colors, that are changed only by a step of saturation or brightness levels, set a step object. The step object has four properties you can configure.

  • baseColor: The color that is used as a starting point for the gradation of colors. The saturation and brightness values are applied to this color.

  • steps: The number of colors that will be generated. This means that the total number of colors in the sector will be the step value plus one - the starting color.

  • saturation: The step in saturation that will be applied on every next generated color. The value can be a positive or a negative number.

  • brightness: The step in brightness that will be applied on every next generated color. The value can be a positive or a negative number.

Code Listing 6: Setting a Palette with Step Objects Copy imageCopy
<div data-win-control="Telerik.UI.RadPalettePicker" data-win-options="{
        palette: [
            {baseColor: 'rgb(0, 0, 255)', steps: 5, saturation: -20, brightness: -20},
            {baseColor: 'rgb(0, 255, 0)', steps: 5, saturation: -20, brightness: -20},
            {baseColor: 'rgb(0, 255, 255)', steps: 5, saturation: -20, brightness: -20},
            {baseColor: 'rgb(255, 255, 255)', steps: 5, saturation: -20, brightness: -20},
            {baseColor: 'rgb(255, 0, 255)', steps: 5, saturation: -20, brightness: -20},
            {baseColor: 'rgb(255, 255, 0)', steps: 5, saturation: -20, brightness: -20}
        ]
    }"></div>

Figure 3: RadPalettePicker with Step Color Sectors.

colorpicker-palette-step-colors

The palette property also accepts an array with combinations of the above methods.

Code Listing 7: Setting a Palette with Combination of Colors, Arrays of Colors and Step Objects Copy imageCopy
<div id="colorPicker" data-win-control="Telerik.UI.RadPalettePicker" data-win-options="{
        palette: [
            '#000', ['#333', '#007700', '770000', '000077'], '#666', '#999', 
            {baseColor: '#FC0055', steps: 2, saturation: -20, brightness: 20},
            'rgba(100, 255, 255, 0.5)',
            ['#f0d0c9', '#e2a293', '#d4735e', '#65281a'],
            ['#fcecd5', '#f9d9ab', '#f6c781', '#c87d0e'],
            ['#e1dca5', '#d0c974', '#a29a36', '#514d1b'],
            ['#c6d9f0', '#8db3e2', '#548dd4', '#17365d']
        ]
    }"></div>

Figure 4: RadPalettePicker with a Combination of Different Sectors.

colorpicker-palette-combination

RadPalettePicker also provides a default color palette in the scenario where the user needs just a set of basic colors. In this case you have to initialize the control without specifying а palette and the color picker will be visualized with the default palette.

Figure 5: RadPalettePicker with the Default Color Palette.

colorpicker-palette-default

The default color palette can be changed individually for each palette picker control through the defaultPalette property value. It takes the same values as the palette property.

Getting or Setting the Selected Color

RadPalettePicker exposes three properties that you can use to get or set the last two selected colors. Below is a list of the properties with a short description.

  • value: Use this property to get or set the currently selected color. The property returns a color string in format '#ffffff'. When assigning a value to the property, the new color is instantly selected and the UI is updated. The property value can be in one of the following formats: hex, RGB, RGBA or a Color object.

    Code Listing 8: Getting and Setting the Currently Selected Color Using the value Property Copy imageCopy
    var red = Telerik.Utilities.color.parseColor("#FF0000");
    
    palettePickerControl.value = red;
    palettePickerControl.value = '#FFAA66';
    palettePickerControl.value = 'rgb(255, 119, 187)';
    palettePickerControl.value = 'rgba(255, 119, 187, 0.5)';
    
    var value = palettePickerControl.value; // '#ff77bb'
    
  • color: Use this property to get or set the currently selected color. The difference between the value and color properties is that the latter accepts and returns only a Color object as a value. For information on Color objects and how to use them visit this article: ColorPicker Color Objects

    Code Listing 9: Getting and Setting the Currently Selected Color Using the color Property Copy imageCopy
    var red = Telerik.Utilities.color.parseColor("#FF0000");
    
    palettePickerControl.color = red;
    var color = palettePickerControl.color; // { r: 255, g: 0, b: 0, a: 1 }
    
  • previousColor: This property behaves exactly like the value property, but it gets or sets the previously selected color.

    Code Listing 10: Getting and Setting the Previously Selected Color Using the previousColor Property Copy imageCopy
    var red = Telerik.Utilities.color.parseColor("#FF0000");
    
    palettePickerControl.previousColor = red;
    palettePickerControl.previousColor = '#68FFD6';
    palettePickerControl.previousColor = 'rgb(111, 255, 89)';
    palettePickerControl.previousColor = 'rgba(111, 255, 89, 0.5)';
    
    var previousColor = palettePickerControl.previousColor; // '#6fff59'
    

These properties can also be used declaratively in the mark-up or in the control constructor to set initial selected colors.

Enabling/Disabling the Color Selection Tooltip

By default when a user drags to select a color, a tooltip that provides information about the selection is displayed. It displays the selected color with its hex representation. To disable the tooltip, set the tooltip property value to false.