ASP.NET AJAX Control Toolkit Demos v20.1.0.0

ColorPicker
Ajax Control Toolkit
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)
Color picker with continuous palette:

(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
The ColorPicker extender allows you to display a popup color picker when focus is moved to an input element. You can attach the ColorPicker extender to any ASP.NET TextBox control.
ColorPicker Properties
Properties
  • EnabledOnClient - Specifies whether or not ColorPicker behavior is available for the current element.
  • OnClientColorSelectionChanged - A JavaScript function that will be called when the colorSelectionChanged event is raised.
  • OnClientHidden - A JavaScript function that will be called when the hidden event is raised.
  • OnClientHiding - A JavaScript function that will be called when the hiding event is raised.
  • OnClientShowing - A JavaScript function that will be called when the showing event is raised.
  • OnClientShown - A JavaScript function that will be called when the shown event is raised.
  • PaletteStyle - Indicates which color palette the color picker uses. The default is Default.
  • PopupButtonID - The ID of a control to use to display the color-picker popup.
  • PopupPosition - Indicates where the color picker popup should appear relative to the TextBox control that is being extended.
  • SampleControlID - The ID of a control to use to display the selected color.
  • SelectedColor - A color value that the ColorPicker extender is initialized with.
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.
Copyright © 2012-2024 CodePlex Foundation. All Rights Reserved.