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

Getting Started with the Telerik WebForms Drawer

The following tutorial demonstrates how you can add the RadDrawer control. The end result will be similar to Figure 1:

Figure 1: RadDrawer


  1. Add a ScriptManager control on a Web Form.

  2. Add a RadDrawer control to the page, and set its properties:

    • Mode - sets the mode of the RadDrawer to Push/Overlay.
    • SwipeToOpen - enables/disables the swipe gestures for toggling the RadDrawer.
    • DrawerWidth - sets the width of the RadDrawer items container.
    • ContentTemplate - sets the content of the RadDrawer.
    • ItemsTemplate - gets a hierarchical HTML structure that would represent the RadDrawer items.

The end result should be similar to the following:

<telerik:RadDrawer runat="server" ID="RadDrawer1" Mode="push" DrawerWidth="200" SwipeToOpen="true">
        <p style="user-select: none">
            This is the content element containg the text.
        <p style="user-select: none">
            Swipe/Drag the mouse to the right to open the RadDrawer
            <li data-role='drawer-item' class='k-state-selected'>
                <span class='k-item-text'>First Item</span>
            <li data-role='drawer-item'>
                <span class='k-item-text'>Second Item</span>
            <li data-role='drawer-separator'></li> 
            <li data-role='drawer-item'>
                <span class='k-item-text'>Third Item</span>
            <li data-role='drawer-item'>
                <span class='k-item-text'>Fourth Item</span>

Next, you can check the Functionality of the RadDrawer and how to handle the RadDrawer interactions.

In this article