How to provide custom Context Menu on Left Click of Mouse

[Sourabh Sharma]

Hello Team , 
we are trying create custom Context Menu on left click while default document editor is having it in right click of mouse .
So can we have any property for creating context menu on left click of mouse.

Thanks ,
Sourabh

[Mugunthan Anbalagan]

Hi Sourabh,

We don't have support for positioning the built-in context menu on left click. Therefore, we have added a context menu at the application level and opened it on a left click.

Html

           <ejs-documenteditorcontainer id='container' [enableToolbar]=true (created)="onCreate()">

                //Context menu

                <ejs-contextmenu id='contextmenu' [items]= 'menuItems'></ejs-contextmenu>

            </ejs-documenteditorcontainer>

TypeScript

 public menuItems: MenuItemModel[] = [

        {

            text: 'Custom Item 1'

        },

        {

            text: 'Custom Item 2'

        },

        {

            text: 'Custom Item 3'

        }];

 

    onCreate(): void {

       document.getElementById('container').addEventListener('click', function (e) {

            let contextmenuObj: ContextMenu = getInstance(document.getElementById("contextmenu_0"), ContextMenu) as ContextMenu;

             contextmenuObj.open(e.offsetY, e.offsetX);

        })

    }

Sample: https://stackblitz.com/edit/angular-gwsjyt?file=src%2Fapp.component.ts%3AL42

Please try the above solution and let us know if you need any further assistance.

Regards,

Mugunthan A