How can we access data associated with an element when clicking on a context menu item?

[James Cullis]

We have a page that displays the 3 most recent activities on files and have ids etc associated with each one.  This list was created using a standard asp:repeater.  How do we access the data on the element when clicking on a context menu item?

The html for the list above is as follows - the data is highlighted:

The code in the js to create the context menu is as follows:

$(document).ready(function () {

    ej.base.enableRipple(true);

    var menuItems = [

        {

            text: 'Edit'

        },

        {

            text: 'Show in Files...'

        },

        {

            separator: true

        },

        {

            text: 'Delete'

        }];

    var menuOptions = {

        target: ".activity-feed__item",

        items: menuItems,

        select: onContextMenuItemSelect,

        beforeItemRender: onBeforeItemRender

    };

    // Initialize ContextMenu control.

    var menuObj = new ej.navigations.ContextMenu(menuOptions, '#contextmenu');

});

Any help would be greatly appreciated.

James

[Sangeetha Priya Murugan]

  

Hi James, 

 

Thank you for contacting Syncfusion Support. 

 

We have checked your reported requirement ‘To get the target item’s text’ and it can be achievable in our ContextMenu, by using the select event and target element oncontextmenu event as like in the below code example. For your convenience, we have created the sample using list item. 

 

Code Block: 

  

// Event triggers while click the each menu item. 

  select: function(args) { 

    console.log(target.innerText); // target.innerText return the target item text 

    target = ""; 

  } 

}; 

 

document.getElementById("tree").oncontextmenu = function(args) { 

  target = args.target; // to get the current right clicked target element 

}; 

 

<ul id="tree" oncontextmenu="onrightClick()"> 

            <li>ASP.NET</li> 

            <li>ASP.NET MVC</li> 

            <li>Mobile MVC</li> 

            <li>Silverlight</li> 

          </ul> 

          <ul id="contextmenu"></ul> 

 

 

Sample Link: https://stackblitz.com/edit/bxqtc7?file=index.js 

 

Could you please check the above sample and get back to us if you need further assistance. 

 

Regards, 

Sangeetha M