Skip to content

Latest commit

 

History

History
70 lines (60 loc) · 2.25 KB

drawer-implement-navigate-url-feature.md

File metadata and controls

70 lines (60 loc) · 2.25 KB
title description type page_title slug position tags ticketid res_type
How to apply Navigation Urls to RadDrawer
The article shows how to navigate to another page after clicking on a drawer item similar to the NavigateUrl functionality of RadMenu
how-to
Implement NavigateUrl functionality for the Drawer items
drawer-implement-navigate-url-feature
1603352
kb

Environment

Product RadDrawer for ASP.NET AJAX

Description

The how-to article shows how to navigate to another page after clicking on a drawer item similar to the NavigateUrl functionality of RadMenu.

Solution

RadDrawer is a light-weight control based on the Kendo UI drawer widget and you can implement the navigation functionality, by adding <a> tags inside its ItemsTemplate, e.g.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .RadDrawer .k-drawer-items {
            padding: 0 8px;
            line-height: 2em;
        }
    </style>
</head>
<body onload="showDrawer();">
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
        <script>
            function showDrawer(sender, args) {
                var drawer = $find("<%= OverlayDrawer.ClientID %>");
                drawer.show();
            }
        </script>


        <telerik:RadDrawer runat="server" ID="OverlayDrawer"
            Position="left" Mode="Push"
            SwipeToOpen="false">
            <ItemsTemplate>
              <ul>
                <li style='display:block; padding: 0 8px;'><a href='https://www.telerik.com' style='display:block;width:100%;text-decoration:none;color:black;'>Telerik Website</a></li>
                <li style='display:block; padding: 0 8px;'><a href='https://demos.telerik.com' style='display:block;width:100%;text-decoration:none;color:black;'>Demos</a></li>
                <li style='display:block; padding: 0 8px;'><a href='https://www.telerik.com/documentation' style='display:block;width:100%;text-decoration:none;color:black;'>Documentation</a></li>
              </ul>
            </ItemsTemplate>
        </telerik:RadDrawer>
    </form>
</body>
</html>