ColorPicker Sample

ColorPicker Demonstration

Default color picker:

(Set the focus to the textbox to show the color picker popup; the popup dismisses automatically when you choose a color)

ColorPicker with an associated button and a sample control:

(Click the image button to show the color picker; enter a valid color value in to the TextBox to have a sample control show the color)

ColorPicker Description

ColorPicker is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side color-picking functionality with UI in a popup control. You can interact with the color picker by clicking on a color to select the color. Optionally, a PopupButton control and a SampleControl can be provided which allows customizing ColorPicker's behavior.

In addition, if a custom color value is entered in a targeted TextBox then the sample control if it's used can demonstrate a custom color even if it's not in a color picker palette.

ColorPicker Properties

The first example of the color picker has been initialized with this code:

<ajaxToolkit:ColorPickerExtender runat="server" 
    ID="ColorPickerExtender1"
    TargetControlID="Color1"
    OnClientColorSelectionChanged="colorChanged" />

A colorChanged JavaScript function has been defined as following:

function colorChanged(sender) {
  sender.get_element().style.color = 
       "#" + sender.get_selectedColor();
}

The color picker associated with a button has been initialized with this code. The properties in italic are optional:

<ajaxToolkit:ColorPickerExtender runat="server"
    TargetControlID="Color2"  
    PopupButtonID="Image1"
    SampleControlID="Sample1"
    SelectedColor="33ffcc" />

TargetControlID - The ID of the TextBox to extend with the color picker.
PopupButtonID - The ID of a control to show the ColorPicker popup when clicked. If this value is not set, the color picker will pop up when the textbox receives focus.
SampleControlID - The ID of a control to show the ColorPicker's selected color. If this value is set and the color picker popup is open the background color of the sample control will sample the hovered color. If this value is not set, the selected color is not shown.
PopupPosition - Indicates where the color picker popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox.
SelectedColor - Indicates the color value the ColorPicker extender is initialized with.
OnClientColorSelectionChanged - A client JavaScript function that will be called when the colorSelectionChanged event is raised.

ColorPicker Theming

It is not supported yet but will be available soon via the ColorPicker CssClass property. ColorPicker has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find them in the Toolkit solution, in the "AjaxControlToolkit\ColorPicker\ColorPicker.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a ColorPicker control can be styled accordingly.