ColorPicker - Keyboard support

Default configuration

AccessKey set to A

PaletteModes = All

AccessKey set to G

PaletteModes = RGBSliders

AccessKey set to C


ShowIcon = true

Pick Color(Current Color is blank)

AccessKey set to K

PaletteModes = HSB

AccessKey set to E

PaletteModes = HSV

AccessKey set to F

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

This example demonstrates how you can use the keyboard to control RadColorPicker. You can focus the elements of the color picker and iterate through them using the Tab key or, alternatively, you can use a shortcut if you set the AccessKey property.

To focus the ColorPicker using the access key:

  • under IE and Chrome use Alt + AccessKey
  • under Firefox use Shift + Alt + AccessKey
  • under Opera use Shift + Esc and then AccessKey

Depending on the different configurations of RadColorPicker, the AccessKey gives focus to different elements in the color picker. You can examine the different scenarios below:

  • Case: ShowIcon is set to true

    The AccessKey gives focus to the button element that opens the palette. After the color picker has been focused:

    • Alt + DownArrow / UpArrow opens/closes the palette.
    • Enter opens/closes the palette.
    • Esc closes the palette.
  • Case: ShowIcon is set to false

    The AccessKey gives focus to the first tab in the tabstrip. After that:

    • Tab navigates forward amongst tabs.
    • Shift + Tab navigates backwards
    • Enter selects the active tab.
  • Case: PaletteModes is set to WebPalette

    The AccessKey gives focus to the first color box in the palette. When the focus is in the WebPalette palette:

    • DownArrow, UpArrow, LeftArrow and RightArrow navigate amongst color boxes.
    • Enter will select the active color
  • Case: PaletteModes is set to RGBSliders, HSV or HSB

    the AccessKey gives focus to the input corresponding to the Red channel. After that:

    • Tab navigates forward amongst inputs.
    • Shift + Tab navigates backwards.
    • Enter selects the color.

In case you have specified a TabIndex for the color picker, this TabIndex is applied to all elements in the control.

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

<%@ 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 size-custom">
            <h4>Default configuration</h4>
            <div class="rcb-container center">
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker1" Preset="None" Columns="18"
                    AccessKey="A" Skin="Silk">
                </telerik:RadColorPicker>
            </div>
            <p>AccessKey set to <strong>A</strong></p>
        </div>
        <div class="demo-container size-custom">
            <h4>PaletteModes = All</h4>
            <div class="rcb-container center">
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker2" Preset="None" Columns="18"
                    PaletteModes="All" AccessKey="G" Skin="Silk">
                </telerik:RadColorPicker>
            </div>
            <p>AccessKey set to <strong>G</strong></p>
        </div>
        <div class="demo-container size-custom">
            <h4>PaletteModes = RGBSliders</h4>
            <div class="rcb-container center">
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker3" Preset="None" PaletteModes="RGBSliders"
                    AccessKey="C" Skin="Silk">
                </telerik:RadColorPicker>
            </div>
            <p>AccessKey set to <strong>C</strong></p>
        </div>
        <br class="qsf-clear-float" />
        <div class="demo-container size-custom">
            <h4>ShowIcon = true</h4>
            <div class="rcb-container">
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker4" Preset="None" Columns="18"
                    ShowIcon="true" PaletteModes="All" AccessKey="K" Skin="Silk">
                </telerik:RadColorPicker>
            </div>
            <p>AccessKey set to <strong>K</strong></p>
        </div>

        <div class="demo-container size-custom">
            <h4>PaletteModes = HSB</h4>
            <div class="rcb-container center">
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker5" Preset="None" PaletteModes="HSB"
                    AccessKey="E" Skin="Silk">
                </telerik:RadColorPicker>
            </div>
            <p>AccessKey set to <strong>E</strong></p>
        </div>
        <div class="demo-container size-custom">
            <h4>PaletteModes = HSV</h4>
            <div class="rcb-container center">
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker6" Preset="None" PaletteModes="HSV"
                    AccessKey="F" Skin="Silk">
                </telerik:RadColorPicker>
            </div>
            <p>AccessKey set to <strong>F</strong></p>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?