Issue: Clicking on the image in the kendo menu item, the select event is not triggering.
what i have tried: See the sample code below
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/menu/images">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<h4>Menu with images</h4>
<ul id="menu-images"></ul>
</div>
<script>
$("#menu-images").kendoMenu({
dataSource: [
{
text: "Golf", imageUrl: "../content/shared/icons/sports/golf.png",
items: [
{
text: "Top News",
imageUrl: "../content/shared/icons/16/star.png",
select: function (e) {
alert('Clicking on image select event is not triggering')
}
},
{ text: "Photo Galleries", imageUrl: "../content/shared/icons/16/photo.png" },
{ text: "Videos Records", imageUrl: "../content/shared/icons/16/video.png" },
{ text: "Radio Records", imageUrl: "../content/shared/icons/16/speaker.png" }]
},]
});
</script>
<style>
#menu-sprites .k-sprite {
background-image: url("../content/shared/styles/flags.png");
}
.brazilFlag {
background-position: 0 0;
}
.indiaFlag {
background-position: 0 -32px;
}
.netherlandsFlag {
background-position: 0 -64px;
}
.historyIcon {
background-position: 0 -96px;
}
.geographyIcon {
background-position: 0 -128px;
}
</style>
</div>
</body>
</html>
Description:
I have edited this code sample taken from Telerik demo. in the above code i have added the items for Golf. that also have the select function which is what i am talking about. after executing this. If i click on the text "Top News" the alert will trigger.The alert is not working when i click/select on the image.
Posting in Telerik forum is only applicable for licensed users. I dont have.
Let me know if any body come across these kind of issue.
Thanks Dev
It seems like you have nested the event-declaration within the dataSource-item.
Just move the declaration to the menu-level and it should work.
Using
$(e.item)you can go further and figure out which item has been selected. Have a look the event-section of the online-demo. http://demos.telerik.com/kendo-ui/menu/events