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

Keyboard Support

  • Demo Configurator
  • TagCloud AccessKey:
    "HTML5" Item AccessKey:

As an improvement to the current keyboard support to RadTagCloud in Q3 2012 we have introduced keyboard navigation through items - now the users can use Arrow Keys to navigate to specific item. This new feature is enabled by setting AccessKey property to the TagCloud control, either in the declaration tag or through the code behind.

Press Alt + AccessKey in IE / Chrome, Alt + Shift + AccessKey in FireFox, Shift + Esc + AccessKey in Opera, or use Tab to move to and focus the control.

Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on the page".

In this example you can see how to dynamically configure AccessKey for the RadTagCloud and / or a specific TagCloud's Item.

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

<!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-container size-narrow">
        <telerik:RadTagCloud RenderMode="Lightweight" ID="tagCloud" runat="server" AccessKey="T">
            <Items>
                <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" />
                <telerik:RadTagCloudItem Text="AJAX" Weight="134" />
                <telerik:RadTagCloudItem Text="VB" Weight="56" />
                <telerik:RadTagCloudItem Text="C#" Weight="38" />
                <telerik:RadTagCloudItem Text="Web" Weight="73" />
                <telerik:RadTagCloudItem Text="jQuery" Weight="23" />
                <telerik:RadTagCloudItem Text=".NET" Weight="78" />
                <telerik:RadTagCloudItem Text="Code" Weight="50" />
                <telerik:RadTagCloudItem Text="UI" Weight="80" />
                <telerik:RadTagCloudItem Text="Unit" Weight="20" />
                <telerik:RadTagCloudItem Text="Class" Weight="50" />
                <telerik:RadTagCloudItem Text="Tools" Weight="40" />
                <telerik:RadTagCloudItem Text="Dynamic" Weight="58" />
                <telerik:RadTagCloudItem Text="Telerik" Weight="60" />
                <telerik:RadTagCloudItem Text="HTTP" Weight="64" />
                <telerik:RadTagCloudItem Text="Start" Weight="62" />
                <telerik:RadTagCloudItem Text="Response" Weight="23.7" />
                <telerik:RadTagCloudItem Text="Client-side" Weight="55" />
                <telerik:RadTagCloudItem Text="Default" Weight="8.5" />
                <telerik:RadTagCloudItem Text="Event" Weight="45" />
                <telerik:RadTagCloudItem Text="Property" Weight="24" />
                <telerik:RadTagCloudItem Text="Tests" Weight="81" />
                <telerik:RadTagCloudItem Text="Method" Weight="87" />
                <telerik:RadTagCloudItem Text="DataSource" Weight="34" />
                <telerik:RadTagCloudItem Text="JavaScript" Weight="35.70" />
                <telerik:RadTagCloudItem Text="Server-side" Weight="59.3" />
                <telerik:RadTagCloudItem Text="Accessibility" Weight="15.7" />
                <telerik:RadTagCloudItem Text="HTML5" Weight="90" AccessKey="Y" />
                <telerik:RadTagCloudItem Text="XHTML" Weight="47.8" />
                <telerik:RadTagCloudItem Text="Compliance" Weight="29.45" />
                <telerik:RadTagCloudItem Text="Callback" Weight="53" />
                <telerik:RadTagCloudItem Text="Request" Weight="39.3" />
                <telerik:RadTagCloudItem Text="Postback" Weight="9.5" />
                <telerik:RadTagCloudItem Text="DOM" Weight="65.49" />
                <telerik:RadTagCloudItem Text="Markup" Weight="35.49" />
                <telerik:RadTagCloudItem Text="Trigger" Weight="24.975" />
                <telerik:RadTagCloudItem Text="XML" Weight="43.975" />
                <telerik:RadTagCloudItem Text="CSS" Weight="14.392" />
                <telerik:RadTagCloudItem Text="Object" Weight="85.6" />
            </Items>
        </telerik:RadTagCloud>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <ul class="fb-group">
                    <li>
                        <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                            <span class="label">TagCloud AccessKey:</span>
                            <qsf:TextBox ID="tagCloudAccesKeyTextBox" MaxLength="1" CssClass="upperCased" Width="35" runat="server" />
                        </qsf:ConfiguratorColumn>
                        <qsf:ConfiguratorColumn runat="server">
                            <span class="label">"HTML5" Item AccessKey:</span>
                            <qsf:TextBox ID="htmlItemTextBox" runat="server" MaxLength="1" CssClass="upperCased" Width="35" />
                        </qsf:ConfiguratorColumn>
                    </li>
                    <li>
                        <qsf:Button ID="setShortCutsButton" Text="Set ShortCuts" runat="server" OnClick="SetShortCutsButtonClick" />
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance