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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ContextMenu on ListView Item

Thread ID:

Created:

Updated:

Platform:

Replies:

147954 Sep 29,2019 01:15 PM UTC Oct 1,2019 11:54 AM UTC Angular - EJ 2 5
loading
Tags: ListView
Michael Hertlein
Asked On September 29, 2019 01:15 PM UTC

Hello,

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>
{{dataSource.rightDesc}}
</div>
</ng-template>
</ejs-listview>
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,

Michael


Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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"); 
    console.log(this.listItemId); 
} 
 
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? 
 
Regards, 
Vinoth Kumar S 


Michael Hertlein
Replied On September 30, 2019 12:30 PM UTC

Hello,

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.


Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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> 
        </div> 
    </ng-template> 
</ejs-listview> 
 
<script> 
    onTarget() 
    { 
        this.contextMenu.target = ".rightItem" 
    } 
</script> 
 
 
Could you please check the above details and get back to us if you need any further assistance in this? 
 
Regards, 
Vinoth Kumar S 


Michael Hertlein
Replied On October 1, 2019 09:26 AM UTC

Hi,

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.

Michael

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

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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. 
 
Regards, 
Vinoth Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon