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 show context menu on left click ?( EJ2 )

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

5 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team January 3, 2019 06:26 AM UTC

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);  
} 
 




API links- 

Please get back to us for your further assistance. 

Regards, 
Thavasianand S. 



VI victor January 3, 2019 09:25 AM UTC

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 
 

 


TS Thavasianand Sankaranarayanan Syncfusion Team January 4, 2019 05:03 AM UTC

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 } 
            ], 
 
          ------ 
} 



Refer the below screen shot. 

 

Refer the help documentation. 



Regards, 
Thavasianand S. 



VI victor January 4, 2019 09:31 AM UTC

Hi :
         When add editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Dialog' },
the grid displays  "ok" and "cancel"  button ,  what happened ?




PS Pavithra Subramaniyam Syncfusion Team January 7, 2019 08:31 AM UTC

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, 
 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon