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

[Jared Knowlton]

<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>

[Renjith Singh Rajendran]

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, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerSample-1472434969 

 

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 

[Saravanan Arumugam]

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.

[Renjith Singh Rajendran]

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

    } 

} 

API Reference : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecords 

Documentation : https://blazor.syncfusion.com/documentation/datagrid/selection/#selection-mode 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran