how to show context menu on left click ?( EJ2 )

[victor]

Can you explain how to show context menu on left click ? 

[Thavasianand Sankaranarayanan]

Hi Victor, 

Thanks for contacting Syncfusion support. 

We have validated your requirement, we can achieve your requirement by using the created  and context menu’s beforeOpen event and we have created a sample for your requirement that can be viewed from the below link. 

Code example:  

let grid: Grid = new Grid( 

    { 

        dataSource: orderDetails, 

         

        . . . 

 

        created: () => { 

          grid.contextMenuModule.contextMenu.addEventListener('beforeOpen', (args) => { 

            if (args.event && (args.event.which === 3)) 

            args.cancel = true; 

          }); 

          grid.contextMenuModule.contextMenu.beforeOpen = (args) => { 

            args.event = globevent; 

            grid.contextMenuModule.contextMenuBeforeOpen(args); 

          }  

        } 

    }); 

grid.appendTo('#Grid'); 

 

document.getElementById('Grid').onclick = (event) => { 

  globevent = event; 

  grid.contextMenuModule.contextMenu.open(event.pageY + pageYOffset, event.pageX + pageXOffset);  

} 

 

Sample link: https://stackblitz.com/edit/sy2o1k-5x2f5t?file=index.ts  

API links- 

https://ej2.syncfusion.com/documentation/api/grid/#created  

 https://ej2.syncfusion.com/documentation/api/context-menu/#beforeopen  

Please get back to us for your further assistance. 

Regards, 

Thavasianand S. 

[victor]

Hi Thavasianand ,

                     

Thank you for reply.

 

There is a further question , can you help me to solve it ? 

I want to click context menu item to open dialog and edit record 

 

 

[Thavasianand Sankaranarayanan]

Hi Victor, 

Thanks for your update. 

As per your given detail we suspect that you want to edit the record by dialog edit mode when we clicking the context menu item in Grid. 

We can achieve your requirement by using the below code example. 

let grid: Grid = new Grid( 

        { 

            dataSource: orderDetails, 

            allowExcelExport: true, 

            allowPdfExport: true, 

            allowSorting: true, 

            editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, mode:'Dialog' }, 

            allowPaging: true, 

            contextMenuItems: ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending', 

                'Copy', 'Edit', 'Delete', 'Save', 'Cancel', 

                'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage', 

                'LastPage', 'NextPage'], 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right', isPrimaryKey: true }, 

                { field: 'CustomerName', headerText: 'Customer Name' }, 

                { field: 'Freight', format: 'C2', textAlign: 'Right', editType: 'numericedit' }, 

                { field: 'ShipName', headerText: 'Ship Name', width: 200 }, 

                { field: 'ShipCountry', headerText: 'Ship Country', width: 150, editType: 'dropdownedit' }, 

                { field: 'ShipCity', headerText: 'Ship City', width: 150 } 

            ], 

 

          ------ 

} 

Sample: https://stackblitz.com/edit/sy2o1k-vdmasg?file=index.ts 

Refer the below screen shot. 

 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/documentation/grid/edit/?no-cache=1#dialog 

Link: https://ej2.syncfusion.com/documentation/grid/context-menu/ 

Regards, 

Thavasianand S. 

[victor]

Hi :

         When add editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Dialog' },

the grid displays  "ok" and "cancel"  button ,  what happened ?

[Pavithra Subramaniyam]

Hi Victor, 

 

We have analyzed your query and we suspect that the CSS for dialog component has not been applied in your sample. So We suggest you to refer the the below file which will contain style for all Essential JavaScript 2 Components. 

 

<link rel='nofollow' href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet"> 

 

 

Please refer the sample for further details, 

 

Sample link: https://stackblitz.com/edit/sy2o1k-ucg4ht?file=index.html 

 

Regards, 

Pavithra S.