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

Keyboard Support

  • Mail Box

  • Monday meeting

    Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.

  • I'm sorry, Tom

    Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...

Keyboard Support

The enable the keyboard navigation of RadDrawer set its Navigatable property to 'true'. 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:RadDrawer runat="server" ID="RadDrawer1" Navigatable="true" AccessKey="W">

Keyboard Legend

Focus

  • Alt + AccessKey Focuses the current active element of the drawer

Supported keys and user actions

  • Home
    • Focuses the first item in the drawer.
  • End
    • Focuses the last item in the drawer.
  • Up Arrow
    • Focuses the previous item in the drawer.
  • Down Arrow
    • Focuses the next item in the drawer.
  • Enter
    • Selects the focused item.
  • Space
    • Selects the focused item.
  • Esc
    • Hides the drawer.
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ 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>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js"></script>
</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">
        <telerik:RadToolBar runat="server" ID="RadToolBar1" OnClientButtonClicked="OnClientButtonClicked">
            <Items>
                <telerik:RadToolBarButton Value="toggle" CssClass="k-i-menu k-icon">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton>
                    <ItemTemplate>
                        <h3 class="toolbar-title">Mail Box</h3>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
            </Items>
        </telerik:RadToolBar>
        <telerik:RadDrawer runat="server" ID="RadDrawer1" CssClass="RadDrawer1CssSelector" Mode="push" AccessKey="W" Navigatable="true"
            Position="left" MinHeight="330" DrawerWidth="200" Mini="true" SwipeToOpen="true" ShowBorders="true">
            <ClientEvents OnItemClick="OnItemClick" />
            <MiniSettings Width="50" />
            <ContentTemplate>
                <div id="Inbox">
                    <ul class="inboxList">
                        <li>
                            <h6>Monday meeting</h6>
                            <p>Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.</p>
                        </li>
                        <li>
                            <h6>I'm sorry, Tom</h6>
                            <p>Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...</p>
                        </li>
                    </ul>
                </div>
                <div id="Notifications" class="hidden">
                    <ul>
                        <li>Monday meeting</li>
                        <li>Regarding org chart changes</li>
                        <li>Meeting with Cliff</li>
                        <li>Global Marketing Meeting</li>
                        <li>Out tonight with collegues?</li>
                    </ul>
                </div>
                <div id="Calendar" class="hidden">
                    <ul>
                        <li>
                            <h6>11/5 Monday</h6>
                            <p>Martha Birthday</p>
                        </li>
                        <li>
                            <h6>15/6 Sunday</h6>
                            <p>Job interview for internal position</p>
                        </li>
                    </ul>
                </div>
                <div id="Attachments" class="hidden">
                    <ul>
                        <li>Build enterprise apps</li>
                        <li>Fw: Regarding Multiline textbox</li>
                        <li>Away next week</li>
                        <li>Fw: Your Costume is ready</li>
                        <li>Update completed</li>
                    </ul>
                </div>
                <div id="Favourites" class="hidden">
                    <ul>
                        <li>90% Discount!</li>
                        <li>90% Discount!</li>
                        <li>One time offer!</li>
                    </ul>
                </div>
            </ContentTemplate>
            <ItemsTemplate>
                 <ul> 
                    <li data-role='drawer-item' class='k-state-selected'><span class='k-icon k-i-inbox'></span><span class='k-item-text'>Inbox</span></li> 
                    <li data-role='drawer-separator'></li> 
                    <li data-role='drawer-item'><span class='k-icon k-i-notification k-i-bell'></span><span class='k-item-text'>Notifications</span></li> 
                    <li data-role='drawer-item'><span class='k-icon k-i-calendar'></span><span class='k-item-text'>Calendar</span></li> 
                    <li data-role='drawer-separator'></li> 
                    <li data-role='drawer-item'><span class='k-icon k-i-hyperlink-email'></span><span class='k-item-text'>Attachments</span></li> 
                    <li data-role='drawer-item'><span class='k-icon k-i-star-outline k-i-bookmark-outline'></span><span class='k-item-text'>Favourites</span></li> 
                </ul>
            </ItemsTemplate>
        </telerik:RadDrawer>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance