<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section wide">
<div id="toolbar"></div>
<div id="drawer">
<div id="drawer-content">
<div id="Inbox">
<a href="google.com"></a>
</div>
<div id="Notifications" class="hidden">
<ul>
<li>Monday meeting</li>
<li>Regarding org chart changes</li>
<li>Meeting with Cliff</li>
<li>Global Marketing Meeting</li>
<li>Out tonight with collegues?</li>
</ul>
</div>
<div id="Calendar" class="hidden">
<ul>
<li>
<h6>11/5 Monday</h6>
<p>Martha Birthday</p>
</li>
<li>
<h6>15/6 Sunday</h6>
<p>Job interview for internal position</p>
</li>
</ul>
</div>
<div id="Attachments" class="hidden">
<ul>
<li>Build enterprise apps</li>
<li>Fw: Regarding Multiline textbox</li>
<li>Away next week</li>
<li>Fw: Your Costume is ready</li>
<li>Update completed</li>
</ul>
</div>
<div id="Favourites" class="hidden">
<ul>
<li>90% Discount!</li>
<li>90% Discount!</li>
<li>One time offer!</li>
</ul>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#drawer").kendoDrawer({
template: "<ul>
<li data-role='drawer-item' class='k-selected'><span class='k-icon k-i-inbox'></span><span class='k-item-text' data-id='Inbox'>Inbox</span></li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'><span class='k-icon k-i-notification k-i-bell'></span><span class='k-item-text' data-id='Notifications'>Notifications</span></li>
<li data-role='drawer-item'><span class='k-icon k-i-calendar'></span><span class='k-item-text' data-id='Calendar'>Calendar</span></li>
<li data-role='drawer-separator'></li>
<li data-role='drawer-item'><span class='k-icon k-i-hyperlink-email'></span><span class='k-item-text' data-id='Attachments'>Attachments</span></li>
<li data-role='drawer-item'><span class='k-icon k-i-star-outline k-i-bookmark-outline'></span><span class='k-item-text' data-id='Favourites'>Favourites</span></li>
</ul>",
mode: "push",
mini: true,
itemClick: function (e) {
if(!e.item.hasClass("k-drawer-separator")){
e.sender.drawerContainer.find("#drawer-content > div").addClass("hidden");
e.sender.drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-item-text").attr("data-id")).removeClass("hidden");
}
},
position: 'left',
minHeight: 330,
swipeToOpen: true
});
});
function toggleDrawer() {
var drawerInstance = $("#drawer").data().kendoDrawer;
var drawerContainer = drawerInstance.drawerContainer;
if(drawerContainer.hasClass("k-drawer-expanded")) {
drawerInstance.hide();
} else {
drawerInstance.show();
}
}
$("#toolbar").kendoToolBar({
items: [
{ type: "button", icon: "menu", attributes: { "class": "k-flat" }, click: toggleDrawer},
{ template: "<h3 style='margin-left: 20px;'>Mail Box</h3>" }
]
});
</script>
<style>
#drawer-content li {
font-size: 1.2em;
padding-left: .89em;
background: 0 0;
border-radius: 0;
border-width: 0 0 1px;
border-color: rgba(33, 37, 41, 0.125);
border-style: solid;
line-height: 1.5em;
padding: 1.09em .84em 1.23em .84em;
}
#drawer-content li:last-child {
border: 0;
}
.hidden {
display: none;
}
#example .demo-section {
max-width: 640px;
}
.k-toolbar .k-icon {
font-size: 18px;
}
</style>
</div>
</body>
</html>
<div id="Inbox">
<a href="google.com"></a>
</div>
This block here ^^
I’m trying to forward the menu item onclick to a link
Why does this href not forward the page to google.com on click of the menu item?
Seems like this should be a simple fix, we are not using router. I also tried adding onclick="location.href=’requisitions’"
It looks like your post is mostly code; please add some more details. Not sure how many more details I can add.
2
Answers
It is because the link is rendered to the right of the Inbox icon. The element has no content though so you can’t see it. Change it to something like this and you’ll see what I mean:
To do what you want, add more code to your itemClick() event handler to determine if the Inbox item was clicked and open a new tab or redirect the page from there.
@NigelK is correct on both counts. Perhaps you didn’t understand his explanation. I’ll supplement the "add more code to your
itemClick()event bit. With this solution, you won’t need<a href="https://google.com"></a>inside thedivInbox.On the event handler, you check if the Inbox was clicked by finding the CSS class and if it was open the URL. Like so: