Table of Contents
Table of Contents
PopupLayoutTemplate Property

Gets or sets the template that is used to define the color picker popup layout.

Syntax
C#
Copy
 public ITemplate PopupLayoutTemplate { get; set; }
Remarks

Use this property to customize the color picker's popup window.

The LayoutTemplate can contain any valid HTML or ASP.NET server control as well controls with pre-defined IDs. At runtime, the color picker recongizes these pre-defined IDs and associates specific functionalities to the control. For example, a Button control with ID "OKButton" will be automatically associated with the functionality of closing the popup window and accepting the current value.

The following table lists all supported IDs:
ID Remark
ColorField Represents the color field. Must be of PlaceHolder type.
SpectrumSlider Represents the spectrum slider. Must be of PlaceHolder type.
OriginalColor

Represents the original color block. Must be of PlaceHolder type. The original color block is a rectangle area where the color picker displays the original color prior to any changes made by the user. It is usually placed close to the adjusted color block, which displays the current selected color.

Note: The element that encloses this control, not this control itself will be used for the original color block. As such it is necessary to set fixed size on the enclosed element to define the size of the original color block. For example:

HTML
Copy
<div style="height:30px;width:30px;">
    <asp:PlaceHolder runat="server" ID="OriginalColor" />
</div>
AdjustedColor

Represents the adjusted color block. Must be of PlaceHolder type. The adjusted color block is a rectangle area where the color picker displays the current selected color. It is usually placed close to the original color block, which displays the color prior to any user changes.

Note: The element that encloses this control, not this control itself will be used for the adjusted color block. As such it is necessary to set fixed size on the enclosed element to define the size of the original color block. For example:

HTML
Copy
<div style="height:30px;width:30px;">
    <asp:PlaceHolder runat="server" ID="AdjustedColor" />
</div>
HueTextBox Must be a TextBox control. User can enter hue value (0 - 360) in this text box.
SatTextBox Must be a TextBox control. User can enter saturation value (0 - 100) in this text box.
BrtTextBox Must be a TextBox control. User can enter brightness value (0 - 100) in this text box.
RTextBox Must be a TextBox control. User can enter red component value (0 - 255) in this text box.
GTextBox Must be a TextBox control. User can enter green component value (0 - 255) in this text box.
BTextBox Must be a TextBox control. User can enter blue component value (0 - 255) in this text box.
CTextBox Must be a TextBox control. User can enter cyan component value (0 - 100) in this text box.
MTextBox Must be a TextBox control. User can enter magenta component value (0 - 100) in this text box.
YTextBox Must be a TextBox control. User can enter yellow component value (0 - 100) in this text box.
KTextBox Must be a TextBox control. User can enter black component value (0 - 100) in this text box.
WebColorTextBox Must be a TextBox control. User can directly enter a color in hexadecimal values. For example, #ff0000 for red.
WebSafeCheckBox Must be a CheckBox control. User can use this checkbox to enable/disable web-safe color mode. When in web-safe color mode, the color picker only returns colors that are web-safe.
ColorNameLabel Must be a Label control. This label is used to display the currently selected color's name in English.
InvertButton Must be a Button, LinkButton or ImageButton control. User can click this button to covert the current selected color to the inverted color.
DesaturateButton Must be a Button, LinkButton or ImageButton control. User can click this button to desaturate the current selected color. Desaturate set the saturation to 0.
OKButton Must be a Button, LinkButton or ImageButton control. User can use this button to close the color picker popup.
See Also