ContextMenu on ListView Item

[Michael Hertlein]

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]

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 

[Michael Hertlein]

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]

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> 

 

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 

[Michael Hertlein]

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]

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