ColorPicker - Client-side API

Select color

Pick Color(Current Color is blank)

Demo Configurator

Color Commands
Palette Interaction
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadColorPicker provides a flexible client-side API that allows you to interact with the color picker on the client.

In this demo you can examine how to use the client-side API to change the selected color, get the selected color, reset the selection (returns NULL) and interact with the palette.

You can find more useful information and help in the provided related resources.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ColorPicker.ClientSideAPI.DefaultCS" %>

<%@ 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" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</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 size-thin">
            <h3>Select color</h3>
            <telerik:RadColorPicker RenderMode="Lightweight" ShowIcon="true" ID="RadColorPicker1" runat="server" PaletteModes="All"
                OnClientLoad="TelerikDemo.OnClientLoad">
            </telerik:RadColorPicker>
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Color Commands" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:TextBox ID="ColorPickerNewColor" runat="server" Size="Narrow">
                                <ClientEvents OnLoad="TelerikDemo.TextBoxNewColor_OnLoad" />
                            </qsf:TextBox>
                            <qsf:Button runat="server" Text="Set Color" Size="Narrow" OnClientClicked="TelerikDemo.SetColor" AutoPostBack="false"></qsf:Button>
                        </li>
                        <li>
                            <qsf:TextBox ID="ColorPickerColor" runat="server" Size="Narrow" ReadOnly="true">
                                <ClientEvents OnLoad="TelerikDemo.TextBoxColor_OnLoad" />
                            </qsf:TextBox>
                            <qsf:Button runat="server" Text="Get Color" Size="Narrow" OnClientClicked="TelerikDemo.GetColor" AutoPostBack="false"></qsf:Button>
                        </li>
                        <li>
                            <qsf:Button runat="server" Text="Reset Color" Size="Wide" OnClientClicked="TelerikDemo.ResetColor" AutoPostBack="false"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn runat="server" Size="Narrow" Title="Palette Interaction">
                    <qsf:Button runat="server" Text="Show" Size="Narrow" OnClientClicked="TelerikDemo.ShowPallete" AutoPostBack="false"></qsf:Button>
                    <qsf:Button runat="server" Text="Hide" Size="Narrow" OnClientClicked="TelerikDemo.HidePallete" AutoPostBack="false"></qsf:Button>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>


    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?