ContextMenu on ListView Item

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

Reply | Reply with quote

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,

https://stackblitz.com/edit/angular-vsnjkr?file=src/app/app.component.html

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

Reply | Reply with quote

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.

Reply | Reply with quote

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>

</ng-template>

</ejs-listview>

onTarget()

{

this.contextMenu.target = ".rightItem"

}

</script>

Sample link: https://stackblitz.com/edit/angular-z7j2y3?file=src/app/app.component.html

Could you please check the above details and get back to us if you need any further assistance in this?

Regards,

Vinoth Kumar S

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US