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

Client-side API

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

The RadDrawer provides client-side API methods for showing and hiding the drawer.

  • DefaultCS.aspx
  • 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" />
</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) {
                $find("<%= RadDrawer1.ClientID %>").show();
            }

            function hideDrawer(sender, args) {
                $find("<%= RadDrawer1.ClientID %>").hide();
            }
        </script>
        <telerik:RadDrawer runat="server" ID="RadDrawer1" 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>
                            <qsf:Button Width="100" ID="ShowDrawer" Text="Show" AutoPostBack="false" runat="server" OnClientClicked="showDrawer" />
                            <qsf:Button Width="100" ID="HideDrawer" Text="Hide" AutoPostBack="false" runat="server" OnClientClicked="hideDrawer" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance