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

Keyboard support

Default configuration

No Color

AccessKey set to A

PaletteModes = All

No Color

AccessKey set to G

PaletteModes = RGBSliders

No ColorApply

AccessKey set to C


ShowIcon = true

Pick Color(Current Color is blank)

AccessKey set to K

PaletteModes = HSB

No ColorApply

AccessKey set to R

PaletteModes = HSV

No ColorApply

AccessKey set to T

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>
<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="R" Skin="Silk">
                </telerik:RadColorPicker>
            </div>
            <p>AccessKey set to <strong>R</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="T" Skin="Silk">
                </telerik:RadColorPicker>
            </div>
            <p>AccessKey set to <strong>T</strong></p>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance