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

Functionality

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate quaerat quam fugiat deleniti suscipit necessitatibus.
  • Demo Configurator
  • Mode
  • Position

The RadDrawer has two modes that are quite different in terms of behavior:

  • Overlay - takes the entire height of page and it provides overlay effect on the page when opened.
  • Push - in push mode the drawer intaracts with specific content/section of the page. In open state it pushes the content to the left or right (depending on the drawer's position) to take the remaining space.

The RadDrawer can be positioned either on the left or the right side using the position configuration option.

  • DefaultVB.aspx
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!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" runat="server">
        <script>
            function showDrawer(sender, args) {
                var modeList = $find("<%= ModeList.ClientID %>")
                var mode = modeList.get_items()[modeList.get_selectedIndex()].get_value();

                var drawerId = mode == "overlay" ? "<%= OverlayDrawer.ClientID %>" : "<%= PushDrawer.ClientID %>";

                var drawer = $find(drawerId);
                drawer.show();
            }

            function hideDrawers() {
                $find("<%= OverlayDrawer.ClientID %>").hide();
                $find("<%= PushDrawer.ClientID %>").hide();
            }

            function OnSelectedIndexChanged(sender, args) {
                hideDrawers();
                var position = sender.get_items()[args.get_newSelectedIndex()].get_value();
                $find("<%= OverlayDrawer.ClientID %>").get_kendoWidget().position(position);
                $find("<%= PushDrawer.ClientID %>").get_kendoWidget().position(position);
            }
        </script>
        <telerik:RadDrawer runat="server" ID="OverlayDrawer" CssClass="borderless-drawer" Position="left" SwipeToOpen="false">
            <ItemsTemplate>
                 <ul> 
                    <li data-role='drawer-item'><span class='k-item-text'>First Item</span></li>
                    <li data-role='drawer-separator'></li>
                    <li data-role='drawer-item'><span class='k-item-text'>Second Item</span></li> 
                    <li data-role='drawer-item' class='k-state-selected'><span class='k-item-text'>Third Item</span></li> 
                    <li data-role='drawer-separator'></li> 
                    <li data-role='drawer-item'><span class='k-item-text'>Last Item</span></li> 
                </ul>
            </ItemsTemplate>
        </telerik:RadDrawer>

        <telerik:RadDrawer runat="server" ID="PushDrawer" DrawerWidth="150" Position="left" 
            SwipeToOpen="false" Mode="push" ShowBorders="true">
            <ContentTemplate>
                <div class="drawer-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate quaerat quam fugiat deleniti suscipit necessitatibus.</div>
            </ContentTemplate>
            <ItemsTemplate>
                 <ul> 
                    <li data-role='drawer-item'><span class='k-item-text'>First Item</span></li>
                    <li data-role='drawer-separator'></li>
                    <li data-role='drawer-item'><span class='k-item-text'>Second Item</span></li> 
                    <li data-role='drawer-item' class='k-state-selected'><span class='k-item-text'>Third Item</span></li> 
                    <li data-role='drawer-separator'></li> 
                    <li data-role='drawer-item'><span class='k-item-text'>Last Item</span></li> 
                </ul>
            </ItemsTemplate>
        </telerik:RadDrawer>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Mode</span>
                            <telerik:RadRadioButtonList runat="server" Skin="Default" AutoPostBack="false" ID="ModeList" ClientEvents-OnSelectedIndexChanged="hideDrawers">
                                <Items>
                                    <telerik:ButtonListItem Text="Overlay" Value="overlay" Selected="true" />
                                    <telerik:ButtonListItem Text="Push" Value="push" />
                                </Items>
                            </telerik:RadRadioButtonList>
                        </li>
                        <li>
                            <qsf:Button Width="100" ID="ShowDrawer" Text="Show" AutoPostBack="false" runat="server" OnClientClicked="showDrawer" />
                            <qsf:Button Width="100" ID="HideDrawers" Text="Hide" AutoPostBack="false" runat="server" OnClientClicked="hideDrawers" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Position</span>
                            <telerik:RadRadioButtonList runat="server" AutoPostBack="false" ID="PositionList" ClientEvents-OnSelectedIndexChanged="OnSelectedIndexChanged" Skin="Default">
                                <Items>
                                    <telerik:ButtonListItem Text="Left" Value="left" Selected="true" />
                                    <telerik:ButtonListItem Text="Right" Value="right" />
                                </Items>
                            </telerik:RadRadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance