ColorPicker - Palette Appearance

Default configuration

PaletteModes = All

PreviewColor = false

ShowIcon = true

Pick Color(Current Color is blank)

ShowEmptyColor = false

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

The appearance of the palette can be changed using the following properties :

  • ShowIcon - when set to true, the palette will render an icon box which will open the palette on click.It is false by default.
  • ShowEmptyColor - when set to false the no color box will not be displayed. It is true by default.
  • PreviewColor - when set to false the box which displays the current selected color will not be displayed. It is true by default.
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false"  %>

<%@ 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 demo-container">
        <div class="demo-container no-bg size-custom">
            <h3>Default configuration</h3>
            <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker1" Skin="Metro">
            </telerik:RadColorPicker>
        </div>
        <div class="demo-container no-bg size-custom">
            <h3>PaletteModes = All</h3>
            <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker5" PaletteModes="All" Skin="Metro">
            </telerik:RadColorPicker>
        </div>
        <div class="demo-container no-bg size-custom">
            <h3>PreviewColor = false</h3>
            <telerik:RadColorPicker RenderMode="Lightweight" runat="server" PreviewColor="false" ID="RadColorPicker3" Skin="Metro">
            </telerik:RadColorPicker>
        </div>
        <div class="demo-container no-bg size-custom">
            <h3>ShowIcon = true</h3>
            <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ShowIcon="true" ID="RadColorPicker2" Skin="Metro">
            </telerik:RadColorPicker>
        </div>

        <div class="demo-container no-bg size-custom">
            <h3>ShowEmptyColor = false</h3>
            <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ShowEmptyColor="false" ID="RadColorPicker4" Skin="Metro">
            </telerik:RadColorPicker>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?