Simple Drawer script not working

1 Answer 16 Views
Drawer
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Fit2Page asked on 18 Mar 2025, 08:26 AM

Hi,

 

I isolated this script to display overlay drawer but it not working properly, what am I missing?:

 

               <script>
                   function showDrawer(sender, args) {
                       $find("<%= OverlayDrawer.ClientID %>").show();
            }
 
            function hideDrawer() {
                $find("<%= OverlayDrawer.ClientID %>").hide();
                   }
               </script>

        <style>

            .drawer-content {
    height: 200px;
    padding: 1em;
}
 
.RadDrawer.borderless-drawer {
    border: 0;
}
 
div.k-widget.k-drawer {
    z-index: 42002;
}
        </style>
         <asp:Button Width="100" ID="ShowDrawer" Text="Show" AutoPostBack="false" runat="server" OnClientClicked="showDrawer" />
                            <asp:Button Width="100" ID="HideDrawers" Text="Hide" AutoPostBack="false" runat="server" OnClientClicked="hideDrawer" />


       <telerik:RadDrawer runat="server" ID="OverlayDrawer" Skin="Silk" CssClass="borderless-drawer" Position="Right" 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>

1 Answer, 1 is accepted

Sort by
0
Vasko
Telerik team
answered on 18 Mar 2025, 02:58 PM

Hello Marc,

The OnClientClicked attribute is not a standard attribute for ASP.NET buttons. Instead, use the OnClientClick attribute to call JavaScript functions directly from the client-side events of the buttons. Update your button declarations as follows:

<asp:Button Width="100" ID="ShowDrawer" Text="Show" AutoPostBack="false" runat="server" OnClientClick="showDrawer(); return false;" />
<asp:Button Width="100" ID="HideDrawers" Text="Hide" AutoPostBack="false" runat="server" OnClientClick="hideDrawer(); return false;" />

    Regards,
    Vasko
    Progress Telerik

    Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

    Fit2Page
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    commented on 19 Mar 2025, 07:47 AM

    Oeh, that was my bad.
    Thanks Vasko!
    Tags
    Drawer
    Asked by
    Fit2Page
    Top achievements
    Rank 2
    Iron
    Iron
    Iron
    Answers by
    Vasko
    Telerik team
    Share this question
    or