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

Context Menu is triggered on a right click by default, we want it to be a left click

<SfGrid DataSource="@projects"  @onmousedown="MouseDown" AllowMultiSorting="true" AllowSorting="true" AllowPaging="true" AllowResizing="false" Width="1140" 
                                    ContextMenuItems="@(new List<ContextMenuItemModel>() { new ContextMenuItemModel { Text = "Edit", Target = ".context-edit", Id = "editcase" },
                                                                     new ContextMenuItemModel { Text = "Cancel", Target = ".context-edit", Id = "cancelcase" }})">
                                <GridEvents RowSelected="GridRowSelected" ContextMenuItemClicked="@GridContextMenuSelected" TValue="Project"></GridEvents>

3 Replies

RS Renjith Singh Rajendran Syncfusion Team June 1, 2020 10:40 AM UTC

Hi Jared, 

Greetings from Syncfusion support. 

We can achieve this by using Microsoft JSInterop. We have bind the JavaScript “click” event to the application and used the open method of contextMenuModule to open the context menu during click. And we have prevented the default right click open by using args.cancel in beforeOpen event and checking for the right click. 

We are attaching the sample for your convenience, please download the sample from the link below, 
 
Please use the codes below, 

<GridEvents Created="Created" ContextMenuItemClicked="OnContextMenuClick"  TValue="Order"></GridEvents> 
public void Created() 
{ 
    JsRuntime.InvokeAsync<object>("openContextLeftClick");    //Invoke JS method in Created event of Grid 
} 
[contextleft.js]
var globevent; 
function openContextLeftClick() { 
    var grid = document.getElementById('Grid').ej2_instances[0]; 
    grid.contextMenuModule.contextMenu.addEventListener('beforeOpen'function(args){ 
        if (args.event && (args.event.which === 3)) 
            args.cancel = true;                  //cancel the context open at right click
    }); 
    grid.contextMenuModule.contextMenu.beforeOpen = function (args) { 
        args.event = globevent; 
        grid.contextMenuModule.contextMenuBeforeOpen(args); 
    } 
 
 
document.addEventListener('click'function (event) { 
    globevent = event; 
    var grid = document.getElementById('Grid').ej2_instances[0]; 
    grid.contextMenuModule.contextMenu.open(event.pageY + pageYOffset, event.pageX + pageXOffset); 
}); 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 




SA Saravanan Arumugam June 9, 2020 06:59 PM UTC

Hi Renjit,

With this approach, the menu is shown on left click, but the RowInfo value in ContextMenuClickEventArgs is null. Is this something missing due to the custom contextmenu display? Kindly check this and update.

Thank you,
Saravanan.


RS Renjith Singh Rajendran Syncfusion Team June 10, 2020 10:51 AM UTC

Hi Saravanan, 

Thanks for your update. 

By default, the context menu open will be based on right mouse click, so based on the click we will fetch the row info and send for the ContextMenuClickEventArgs. As the previously provided suggestion is a customized solution to open context menu in left click, we suggest you to get the current row details by using the below provided Grid methods.  

Please use the below methods as like in the code to get the row info based on your requirement. 

 
public async Task OnContextMenuClick(ContextMenuClickEventArgs args) 
{ 
    if (args.Item.Id == "copywithheader") 
    { 
        var SelectedRowData = await DefaultGrid.GetSelectedRecords();           //get the current row data in opening context menu 
        var SelectedRowIndex = await DefaultGrid.GetSelectedRowIndexes();       //get the row index of conttext menu row 
        var SelectedCellIndex = await DefaultGrid.GetSelectedRowCellIndexes();  //get the row,cell index of conttext menu row when selection mode is set as both/cell 
        await DefaultGrid.Copy(true); 
    } 
} 


 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Loader.
Live Chat Icon For mobile
Up arrow icon