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

WebForms Drawer Overview

  • 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...

About RadDrawer for ASP.NET AJAX

RadDrawer is a server-side WebForms wrapper over the Drawer for Kendo UI for jQuery. It operates on the client and provides a dismissible or always visible panel. It can act as a sidebar for navigation in your responsive web applications. It can also be used for updating a content of a section of the page.

RadDrawer and 120+ other controls are part of Telerik UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

In this demo the RadDrawer can be opened either by clicking on the hamburger icon or using swipe gesture on the associated content.

Key Features

  • Renders and operates on the client-side
  • Overlay and Push mode
  • Right and Left position
  • Gesture Support
  • Mini mode
  • DefaultVB.aspx
  • scripts.js
  • styles.css
<%@ Page Language="vb" 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" Mode="push" 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