Project 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 ColorPicker by clicking on a colored area to set a color. It requires a binary reference to the ASP.NET AJAX Control Toolkit.

ColorPicker extender is multi-browser compatible: it works with IE 6/7/8, Firefox, Safari and Goggle Chrome. ColorPicker is built on top of ASP.NET AJAX Control Toolkit and internally utilizes a Popup extender. ColorPicker is compatible with the UpdatePanel: can be placed inside the UpdatePanel.

ColorPicker is included in Ajax Control Toolkit since Release 30512. For those who use previous release of Ajax Control Toolkit this ColorPicker project will continue to evolve and stay in sync with the Ajax Control Toolkit.

ColorPicker with an associated button:
colorpicker.png

Read about ColorPicker extender

*ColorPicker overview on Code Project
*Posts on my blog
*Official tutorial on Official ASP.NET Site
*Video tutorial by Joe Stagner

How to use a colorSelectionChanged client event

You can subscribe to the event either via JavaScript code or ASP.NET mark-up:

    var cpe = $find("ColorPickerExtender1");
    cpe.add_colorSelectionChanged(changeColor);

Here $find is a standard method of the ASP.NET AJAX Framework that retunrs an instance of the AJAX component by its BehaviourID; ColorPickerExtender1 is a BehaviourID of the ColorPickerExtender component and changeColor is your JavaScript function that will be called when the event occurs.

<ajaxToolkit:ColorPickerExtender ID="defaultCPE" runat="server"
    TargetControlID="Color1"
    BehaviorID="ColorPicker1"
    OnClientColorSelectionChanged="colorChanged"
/>

Make sure that the changeColor JavaScript function exists on the page otherwise you'll see a JavaScript error "changeColor is undefined". You may define a changeColor function like this:

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

When your function is called after a user picked a color (i.e. clicked a mouse on the color palette) a sender argument will point to the instance of the ColorPickerExtender component that you can use inside your function. For instance, call a method getelement() to retrieve a reference to an input DOM element which the extender is attached to or use a getselectedColor() method to retrieve a hexadecimal color code that the user selected.

Note. When assigning the color value to a DOM element style don't forget to prepend it with a '#' character.

Last edited Jun 3, 2009 at 5:05 PM by aturlov, version 8