Grid - open context menu with Left click not working

[Jovi Simons]

Hi I want the Context menu te be opened at left click. I have seen this thread: https://www.syncfusion.com/forums/154747/context-menu-is-triggered-on-a-right-click-by-default-we-want-it-to-be-a-left-click I tried but no succes. When left clicking on Grid I get an error in my leftContext.js saying this:

"contextLeft.js:17

Uncaught TypeError: Cannot read properties of undefined (reading 'contextMenu')

at HTMLDocument. (contextLeft.js:17:28)

"

My Code: 

@page "/category"
@using Model
@using Components.Category
@inject IJSRuntime jsRuntime


<SfGrid ID="Grid" @ref="DefaultGrid" AllowSorting="true" DataSource="@categories" ContextMenuItems="@(new List<Object>() { new ContextMenuItemModel { Text = "Edit", Target = ".e-content", Id = "edit" }, new ContextMenuItemModel { Text = "Delete", Target = ".e-content", Id = "delete" } })">
                <GridEvents Created="Created" ContextMenuItemClicked="OnContextMenuClick" TValue="Category">
                </GridEvents>
                <GridColumns>
                    <GridColumn Field="@nameof(Category.Name)" HeaderText="Name"></GridColumn>
                    <GridColumn HeaderText="Actions">
                        <Template>
                            @{
                                var category = (context as Category);
                                <i @onclick="@((e) => EditClick(category))" class="fa-regular fa-pen-to-square" style="cursor: pointer;"></i>
                                <i @onclick="@((e) => DeleteClick(category))" class="fa-regular fa-trash-can" style="cursor: pointer;"></i>
                            }
                        </Template>
                    </GridColumn>
                </GridColumns>
            </SfGrid>


@code {
    private SfGrid<Category> DefaultGrid;
    public List<Category> categories { get; set; }


    protected override void OnInitialized()
    {
        LoadData();
    }


    public void Created()
    {
        jsRuntime.InvokeAsync<object>("openContextLeftClick");    //Invoke JS method in Created event of Grid
    }


    /* Loads data */
    private void LoadData(){
        categories = new List<Category>
        {
            new Category {  Name = "test" }
        };
    }
    /* On context menu click */
    public void OnContextMenuClick(ContextMenuClickEventArgs<Category> args)
    {


        if (args.Item.Id == "edit")
        {
            EditClick(args.RowInfo.RowData);
        }
        else if (args.Item.Id == "delete")
        {
            DeleteClick(args.RowInfo.RowData);
        }
    }

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

Also, the cancel on right click is not working either, no errors.

[Sarveswaran Palani]

Hi Jovi,

Greetings from Syncfusion support.

We have analyzed your query and facing mentioned issue at our end in latest version. we will check and update the further details within three business days.

Until then we appreciate your patience.

Regards,

Sarveswaran PK

[Sarveswaran Palani]

Hi Jovi,

Thanks for contacting Syncfusion support.

We have analyzed your query and would like to inform you that previous shared sample was not run as excepted. We have found alternate solution for this issue. Please refer the below code snippet and attached sample. Without JS, we can achieve your requirement by using the separate context menu with grid.

<SfGrid ID="Grid" @ref="DefaultGrid" AllowSorting="true" DataSource="@categories">

    <GridEvents RowSelecting="RowSelecting" RowDeselecting="RowDeSelecting" TValue="Category">

    ……………………………….

</SfGrid>

<SfContextMenu @ref="contextMenuObj" TValue="MenuItem">

    <MenuEvents TValue="MenuItem" ItemSelected="OnContextMenuClick"></MenuEvents>

    <MenuItems>

        <MenuItem Text="Edit"></MenuItem>

        <MenuItem Text="Delete"></MenuItem>

    </MenuItems>

</SfContextMenu>

@code{

    private void RowSelecting(RowSelectingEventArgs<Category> args)

    {

        contextMenuObj.Open(args.Event.ClientX, args.Event.ClientY, true);

    }

 

    private void RowDeSelecting (RowDeselectEventArgs<Category> args)

    {

        if (args.Event != null)

        {

            contextMenuObj.Open(args.Event.ClientX, args.Event.ClientY, true);

        }

    }

}

Using the Open method of context menu and RowSelecting and RowDeSelecting event, we can open context menu on left click.

Could you please check the above sample and get back to us, if you need any further assistance on this.

Regards, 

Sarveswaran PK

Attachment: ContextMenuSample_7502c5eb.zip