ColorPicker - Defining the Colors

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadColorPicker provides simple, yet flexible ways for defining colors in the color palette. There are 3 ways to define the colors in the palette:

  • Using the Preset property - a user can choose from a number of predefined (embedded) palettes. See the available predefined palettes.
  • Defining the Items collection - this allows a user to set his own colors in the color palette
  • Using the Preset property and the Items collection - you can extend the colors of a predefined palette by combining multiple palettes or adding custom colors to an existing palette.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ColorPicker.ColorsDefinition.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <div class="rcb-container ">
                <h2>Standard preset</h2>
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker1" Preset="Standard">
                </telerik:RadColorPicker>
            </div>
            <div class="rcb-container">
                <h2>using Items collection</h2>
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker2" Columns="5" Width="210"
                    Preset="None">
                    <telerik:ColorPickerItem Title="Yellow" Value="#FFFF00"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Light Green" Value="#00FF00"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Turquoise" Value="#00FFFF"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Pink" Value="#FF00FF"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Blue" Value="#0000FF"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Red" Value="#FF0000"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Dark Blue" Value="#000080"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Teal" Value="#008080"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Green" Value="#008000"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Violet" Value="#800080"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Dark Red" Value="#800000"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Dark Yellow" Value="#808000"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Gray - 50%" Value="#808080"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Gray - 25%" Value="#C0C0C0"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Black" Value="#000000"></telerik:ColorPickerItem>
                </telerik:RadColorPicker>
            </div>
            <div class="rcb-container">
                <h2>Grayscale preset via Items collection</h2>
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker4" Preset="Grayscale">
                    <telerik:ColorPickerItem Title="Blue" Value="#0000FF"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Red" Value="#FF0000"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Green" Value="#008000"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Black" Value="#000000"></telerik:ColorPickerItem>
                </telerik:RadColorPicker>
            </div>
            <div class="rcb-container">
                <h2>Combining Presets</h2>
                <h2></h2>
                <!-- This ColorPicker is configured in the code behind -->
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker5" Preset="None">
                </telerik:RadColorPicker>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?