New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side API

Select color

Pick Color(Current Color is blank)
  • Demo Configurator
Color Commands
Palette Interaction

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>
<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>

Support & Learning Resources

Find Assistance