We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ContextMenu on ListView Item


is it possible to show a ContextMenu when clicking on an item in a ListView?
I'm using a template for the items to show an icon and text. Both are wrapped into a div. So my code is
<ejs-listview class="iRights" [dataSource]="iRights" [fields]="rFields" fxFlex>
<ng-template #template let-dataSource>
<div class="rightItem" [id]="'rItem'+dataSource.rightID">
<i class="rightIcon far fa-check-circle fa-lg"></i>
When I set the target of my ContextMenu to "#iRights" then the menu will open, but I don't know which item has been clicked.
When I set the target to ".rightItem", I get an error "Argument 1 of Window.getComputedStyle is not an object.".

What I would like to do is open the ContextMenu on all div.rightItem to read the id of the div in the select event of the ContextMenu.

Thank you,


5 Replies

VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 30, 2019 10:09 AM UTC

Hi Michael, 
Thank you for contacting Syncfusion support. 
Unfortunately, we were unable to reproduce your reported issue. We have created a sample for getting list item id by using beforeOpen event. Please check the below code snippet, 
Code Snippet  
onBeforeOpen(args) { 
    if (args.event.target.classList.contains("e-list-multi-line")) { 
        this.listItem = args.event.target.parentElement; 
    else { 
        this.listItem = args.event.target.parentElement.parentElement; 
    this.listItemId = this.listItem.getAttribute("data-uid"); 
Please refer the sample given below, 
Could you please refer the code snippet in the above sample and get back to us more details with issue replicable sample of you still face the issue? 
Vinoth Kumar S 

MH Michael Hertlein September 30, 2019 12:30 PM UTC


I'm sorry, but I still get this error:
ERROR TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at getScrollableParent (ej2-popups.es2015.js:1037) at ComponentBase.wireEvents (ej2-navigations.es2015.js:1135) at ComponentBase.render (ej2-navigations.es2015.js:1068) at ComponentBase.appendTo (ej2-base.es2015.js:5183) at component-base.js:100 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at Object.onInvokeTask (core.js:39679) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:168) at invokeTask (zone-evergreen.js:481)

I've checked every detail, but couldn't find the reason.
The error occurs on component loading, but only if I set the target to a listitem-class. If I set the target to the ejs-listview itself (target="#iRights" in my example), no error occurs.

VK Vinoth Kumar Sundara Moorthy Syncfusion Team October 1, 2019 07:32 AM UTC

Hi Michael, 
Good day to you. 
We suspect that you are setting the target wrongly for context menu (e.g. class = “iRights” & target = “#iRights”). Please make sure you have provided the target correctly. For your convenience, we have prepared a sample. In this sample, we have used Listview component actionComplete event for assigning context menu target, 
Code Example 
<ejs-listview id='List' [dataSource]='data' headerTitle='Contacts' cssClass='e-list-template' [showHeader]='true' (actionComplete)="onTarget()"> 
    <ng-template #template let-data=""> 
        <div class="e-list-wrapper e-list-multi-line rightItem"> 
            <span class="e-list-item-header">{{data.text}}</span> 
        this.contextMenu.target = ".rightItem" 
Could you please check the above details and get back to us if you need any further assistance in this? 
Vinoth Kumar S 

MH Michael Hertlein October 1, 2019 09:26 AM UTC


I've used the target with correct selector-syntax (.rightItem), but I still get this error.
I don't know why, because in your sample it is working fine. I tried a lot to get this error in the sample, but couln't get it.

But I found a workaround for this.
I set the target on the ListView itself (target="#rights"). In the ListView I all a funtion on (contextmenu) where I store the id of the clicked item. This is working fine.

Thanks a lot.


P.S. How can I properly address you? Unfortunately, as a German I cannot recognize what your first name and surname is.

VK Vinoth Kumar Sundara Moorthy Syncfusion Team October 1, 2019 11:54 AM UTC

Hi Michael, 
You are most welcome. We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on Syncfusion components. 
Vinoth Kumar S 

Live Chat Icon For mobile
Up arrow icon