Problem with selecting items in Kendo UI Menu

Problem: The select event is not triggering when clicking on the image in the kendo menu item.

My troubleshooting steps: Review the sample code provided 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('The select event is not working when clicking on the image')
                        }
                    },
                    { 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>

Explanation:

I have made modifications to the code obtained from the Telerik demo. I specifically added items for Golf, which include a select function that is not functioning as expected. When clicking on "Top News," the alert should trigger, but it does not work when selecting the image instead.

Note that only licensed users can post in the Telerik forum, and unfortunately I am not one of them.

If anyone has encountered a similar issue or has a solution, please reach out.

Thank you, Dev

javascriptjsonasp.net-mvckendo-uikendo-menu

Answer №1

It appears that the event declaration is nested within the dataSource item.

To fix this, simply move the declaration to the menu level and it should work properly.

$("#menu-images").kendoMenu({
            select: function(e) {
              alert($(e.item).children('.k-link').text())                
            },
            dataSource: [
            {
                text: "Golf", imageUrl: "../content/shared/icons/sports/golf.png",
                items: [
                { 
                    text: "Top News", 
                    imageUrl: "../content/shared/icons/16/star.png"
                },
                { 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" }]
            }]
        });

By using $(e.item), you can further determine which item has been selected. Take a look at the event section of the online demo here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the proper way to include "arr[i]" within a for loop?

How can I include "arr[i].length" in my FOR LOOP? Using arr[0].length works correctly, but when using just "i" it throws an error. My goal is to iterate through a 2D array. function calculateSum(arr) { var total = 0; for (let i = 0; i < arr[i] ...

javascriptarraysloopsfor-loop

jQuery does not trigger the error event for a 403 status code when loading a new image src

Currently working on a project that involves implementing a static Google map on a webpage. The challenge I am facing is resizing the map dynamically when the page size changes. In order to achieve this, I have created a function that triggers on page resi ...

javascriptjqueryajax

Attempting to execute a code snippet using Express framework on the local server at port 3000

Having some trouble with my initial attempt at a basic application. The Scraper.js file successfully scrapes a URL and outputs the array to the document object when executed in the console. Now, I want to set up an Express server to run the script whenever ...

javascriptnode.jsexpressnpm

Reduce the amount of code in conditional statements

Is there a way to streamline the following code- <div className="App"> <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox> { parameter1.country && parameter1.category ? < ...

javascriptreactjs

Manage form submission seamlessly without redirecting. Capture information without needing to prevent the default action, then proceed with redirection. Avoid redirecting when using preventDefault, but be aware that data may not

Currently stuck in a tricky situation. I've implemented a custom form submission to prevent redirecting when an express route is triggered by form submission. However, the issue arises when I lose the data being sent without redirection. document.get ...

javascripthtmlexpressxmlhttprequest

What are the steps to create a properly structured JSON in Python?

I need to generate JSON queries for elastic search. This is the code I'm using to construct the query: search_doc = {} search_doc.update({"sort": [{"re_max": {"order": "desc"}}]}) search_doc.update({"from": 0}) search_doc.upda ...

pythonjsonelasticsearch

Securing client side routes in Vue.js: Best practices

Currently, I am in the process of developing a spa using Vue.js as the front end framework. It interacts with a back-end system that utilizes pure JSON and jsonwebtokens for security. While I am more experienced with the React ecosystem, my new role requir ...

javascriptvue.jsweb-frontendvuex

Converting int arrays into JSON for Spring RequestBody handling

I am facing an issue with my Spring controller method that requires a @RequestBody as a parameter. The structure of the request body class is like this: public class myClass { CustomObject obj int x int y int[] values Character c ...

javajsonspring-boot

What is the best way to transform HeadersInit into an Object<string,string> data type?

In short, I am faced with the task of converting the headers of a RequestInit into a format that another library can comprehend. This particular library requires the headers to be in the format of Object<string, string>. Initially, I attempted someth ...

javascripttypescript

What is the best way to replicate the content of the textarea exactly as it is (with all line breaks and special characters)?

Below is the Laravel form I have, and I need to extract the text in a way that retains its original format: <style type="text/css" media="screen"> #editor { position: absolute; top: 150px; right: 150px; bottom: 15 ...

javascriptlaravelace-editor

Navigating sub-domains swiftly

Having trouble setting up sub-domains and routing in Express Node. I need to direct users based on their device and browser type. If the user is on a desktop, they should be routed to web.. If they are on a mobile device, it should be mobile.. And if the ...

javascriptexpress

Understanding the Relationship Between Interfaces and Classes in Typescript

I’ve come across an interesting issue while working on a TypeScript project (version 2.9.2) involving unexpected polymorphic behavior. In languages like Java and C#, both classes and interfaces contribute to defining polymorphic behaviors. For example, i ...

javascripttypescriptoopinterfacepolymorphism

Is there a Possible Bug with Highcharts Categories?

I am in the process of creating a dynamic sales dashboard that automatically updates a column chart displaying the latest sales figures for a team of agents. Within this project, I have developed a function called updateChart() which carries out the follo ...

javascriptphphighcharts

What could be causing my data to appear as undefined or empty? I am using jQuery.post() to send data from JavaScript to PHP

Issue: I am encountering a problem while sending data to my PHP using jQuery's $.post method. The variable data appears to be undefined for some reason. Let me describe the structure of my code... 1. Here is the button with an onClick function: $dat ...

javascriptphpjquerypost

The UPDATE query failed to make any changes to the data stored in the MySQL

Currently I am developing an application using express.js. In my project, I have incorporated the "mysql" add-on (https://www.npmjs.com/package/mysql). The issue I am facing is while sending an UPDATE query to the server and receiving a response that shows ...

javascriptmysqlnode.jsexpressvue.js

The function initFoodModel is missing and causing issues as it tries to read properties of undefined, specifically attempting to read 'findAll'

myWishlist.js const { setupFoodModel } = require("../../model/FoodModel"); const { setupWishlistModel } = require("../../model/myWishlistModel"); const setupMyWishlistModel = async () =\> { try { const sequelizeConnection = awai ...

javascriptnode.jsexpress

Looking to include an additional field in mongoose documents when generating a JSON object in a Node.js application?

var commentSchema = new Schema({ text: String, actions:[{actionid:String, actiondata:String}], author: String }) When retrieving the records, I require a count for action = 1. The desired outcome is to include this count as an additional key ...

jsonnode.jsmongodbmongoose

Combining 2 JSON files based on a specific key value using Ansible

In my scenario, there are two JSON objects provided below. The objective is to compare JSON1 with JSON2 based on the subnet value. If the subnet in JSON1 and localSubnet in JSON2 match, then I need to copy the line (useVpn) under the specific localSubnet f ...

jsonansibleansible-2.x

Can assigning a JSON object to the style attribute in ReactJS make the object unchangeable?

When working on my ReactJS application, I encountered a challenge with dynamically changing CSS styles using the "style" attribute. Typically, I would assign the attribute to a JSON object and update it based on state changes in my component by re-assignin ...

jsonreactjsattributesstylesconfigurable

Create an array of objects in JavaScript using JSON data

I have fetched a collection of dictionaries from my API: The data can be retrieved in JSON format like this: [{"2020-03-11 14:00:00":10.765736766809729} ,{"2020-03-11 15:00:00":10.788090128755387}, {"2020-03-11 16:00:00":10.70594897472582}, {"2020-03-11 1 ...

javascriptjsonreactjsvictory-charts