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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141744 Jan 2,2019 09:21 AM UTC Jan 7,2019 08:31 AM UTC JavaScript - EJ 2 5
loading
Tags: Grid
victor
Asked On January 2, 2019 09:21 AM UTC

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


victor
Replied On 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 
 

 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


victor
Replied On 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 ?



Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;