Ajax Control Toolkit ColorPicker

Modified on 2010/04/15 23:58 by Stephen Walther — Categorized as: Uncategorized

The ColorPicker extender enables you to display a pop-up color picker when the focus is moved to an input element. You can attach the ColorPicker extender to any ASP.NET TextBox control. It provides client-side color-picking functionality with UI in a popup control. Optionally, you can specify a button to display the color-picker popup and a control that previews a color from the color palette. You can also provide a TextBox control where users can enter a color value; the ColorPicker extender can display a custom color even if the color is not in the default color-picker palette.

ColorPicker Server Reference

The properties in italics are optional.



<ajaxToolkit:ColorPickerExtender runat="server" 
    ID="ColorPickerExtender1"
    TargetControlID="Color1"
    OnClientColorSelectionChanged="colorChanged" />
    
The following JavaScript function is called in response to the OnClientColorSelectionChanged event:

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

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

TargetControlID - The ID of the TextBox control to extend.
PopupButtonID - The ID of a control to use to display the color-picker popup. If this value is not set, the color picker will pop up when the TextBox control that is represented by TargetControlID receives focus.
SampleControlID - The ID of a control to use to display the selected color. If this value is set and the color picker popup is open, the background color of the specified control displays the color that the mouse pointer is over. If this value is not set, the selected color is not displayed.
PopupPosition - Indicates where the color picker popup should appear relative to the TextBox control that is being extended. Values can be BottomLeft, BottomRight, TopLeft, TopRight, Left, or Right. The default is BottomLeft.
SelectedColor - The color value that the ColorPicker extender is initialized with.
OnClientColorSelectionChanged - A JavaScript function that will be called when the colorSelectionChanged event is raised.

ColorPicker Client Reference

Sys.Extended.UI.ColorPickerBehavior Class

Events

colorSelectionChanged(handler) - Adds or removes an event handler for the colorSelectionChanged event.
- Parameters - A function that represents the event handler.
showing(handler) - Adds or removes an event handler for the showing event.
- Parameters - A function that represents the event handler.
shown(handler) - Adds or removes an event handler for the shown event.
- Parameters - A function that represents the event handler.
hiding(handler) - Adds or removes an event handler for the hiding event.
- Parameters - A function that represents the event handler.
hidden(handler) - Adds or removes an event handler for the hidden event.
- Parameters - A function that represents the event handler.

Methods

initialize() - Initializes the ColorPicker behavior.
dipose() - Disposes the ColorPicker behavior.
raiseColorSelectionChanged() - Raises the colorSelectionChanged event.
raiseShowing(eventArgs) - Raises the showing event.
- Parameters - A Sys.EventArgs object that represents event arguments for the showing event.
raiseShown(eventArgs) - Raises the shown event.
- Parameters - A Sys.EventArgs object that represents event arguments for the shown event.
raiseHiding(eventArgs) - Raises the hiding event.
- Parameters - A Sys.EventArgs object that represents event arguments for the hiding event.
raiseHidden(eventArgs) - Raises the hidden event.
- Parameters - A Sys.EventArgs object that represents event arguments for the hidden event.
show() - Shows the color picker.
hide() - Hides the color picker.

Properties

button - Gets or sets a Sys.UI.DomElement object that represents the button to use to show the color picker. This property is optional.
sample - Gets or sets a Sys.UI.DomElement object that represents the element to use to preview the color that is currently selected or that the user is holding the mouse pointer over. This property is optional.
selectedColor - Gets or sets a string that contains the color value that is represented by the text box.
enabled - Gets or sets a Boolean value that specifies whether the ColorPicker behavior is available for the current element.
popupPosition - Gets or sets a Sys.Extended.UI.PositionMode object that represents where the popup should be positioned relative to the target control.
- Remarks - The positions can be BottomLeft, BottomRight, TopLeft, or TopRight. The default is BottomLeft.