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

Keyboard Support

T-shirt Sizes

Keyboard Support

RadMultiSelect provides with built-in keyboard support and can be used as soon the control gets focused. You can focus it by iterating through the Page controls using the Tab key, alternatively, you can use a shortcut if you set the AccessKey property.

<telerik:RadMultiSelect runat="server" ID="RadMultiSelect1" AccessKey="w"></telerik:RadMultiSelect>
  • Under IE and Chrome use alt + AccessKey
  • Under Firefox use Shift + Alt + AccessKey

KEYBOARD LEGEND

Focus

Closed popup:

  • left arrow highlights previous selected item
  • right arrow highlights next selected item
  • home highlights first selected item
  • end highlights last selected item
  • delete deletes highlighted item
  • backspace deletes previous selected item
  • down arrow opens the popup
  • esc clears all items

Opened popup:

  • up arrow highlights previous item
  • shift + up arrow selects previous item
  • down arrow highlights next item
  • shift + down arrow selects next item
  • home highlights first item in the popup
  • ctrl + shift + home selects items to the beginning
  • end highlights last item in the popup
  • page up scrolls the popup up
  • page down scrolls the popup down
  • ctrl + shift + end selects items to the end
  • enter selects highlighted item
  • ctrl + space selects highlighted item
  • ctrl + a selects all items
  • esc closes the popup
  • up arrow closes the popup if the first item is highlighted
  • esc closes the popup
  • DefaultCS.aspx
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow" runat="server">
        <h4>T-shirt Sizes</h4>
        <telerik:RadMultiSelect runat="server"
            Placeholder="Select sizes..."
            AccessKey="w"
            DataTextField="text"
            DataValueField="text"
            Width="400px"
            ID="RadMultiSelect1">
            <Items>
                <telerik:MultiSelectItem Text="X-Small"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Small"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Medium"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Large"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="X-Large"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="2X-Large"></telerik:MultiSelectItem>
            </Items>
        </telerik:RadMultiSelect>
    </div>
   
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance