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

How to provide custom Context Menu on Left Click of Mouse

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 ,

1 Reply

MA Mugunthan Anbalagan Syncfusion Team February 15, 2023 01:53 PM UTC

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.


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

                //Context menu

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



 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.


Mugunthan A

Live Chat Icon For mobile
Up arrow icon