Single Click Batch Mode - Don't Edit on Right-Click

[Seth]

I'm using the method recommended for enabling single-click edit more here (https://blazor.syncfusion.com/documentation/datagrid/how-to/single-click-editing-with-batch-mode).  Works great.  The problem I'm having is that I just added a context menu to my grid and it doesn't play nicely with the single-click mode because it doesn't differentiate between a left and right click.  Is there anyway to modify the recommended approach so it only applies to a left click?

[Monisha Saravanan]

Hi Seth,

Greetings from Syncfusion.

We suggest you to use onmouseup event handler to differentiate the right click. Here we have used a boolean variable to check the right click and used the boolean variable to prevent the cell edit operation in Batch edit.

Kindly check the below attached sample and code snippet for your reference.

Sample: https://blazorplayground.syncfusion.com/embed/hNVTDBhnKaDdkSeF?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

<SfGrid @ref="GridInstance" AllowPaging="true"  DataSource="@Orders" @onmouseup=@MouseUp Toolbar="@(new List<string>() { "Cancel", "Update" })" ContextMenuItems="@(new List<ContextMenuItemModel>() { new ContextMenuItemModel { Text = "Clipboard", Target = ".e-content", Id = "clipboard"   } })">

  

    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings>

    <GridEditSettings AllowEditing="true" Mode="EditMode.Batch"></GridEditSettings>

    <GridEvents CellSelected="CellSelectHandler" TValue="Order"></GridEvents>

    <GridColumns>

...

    </GridColumns>

</SfGrid>

 

@code {

    SfGrid<Order> GridInstance { get; set; }

    public bool IsContextMenu = false;

 

    public void MouseUp(MouseEventArgs args)

    {

        if (args.Button == 2) // triggers while right clicking the mouse.

        {

            IsContextMenu = true;

        }

        else

        {

            IsContextMenu = false;

        }

    }

    public async Task CellSelectHandler(CellSelectEventArgs<Order> args)

    {

        if (!IsContextMenu)

        {

        

            //get selected cell index

            var CellIndexes = await GridInstance.GetSelectedRowCellIndexes();

 

            //get the row and cell index

            var CurrentEditRowIndex = CellIndexes[0].Item1;

            var CurrentEditCellIndex = (int)CellIndexes[0].Item2;

 

            //get the available fields

            var fields = await GridInstance.GetColumnFieldNames();

            // edit the selected cell using the cell index and column name

            await GridInstance.EditCell(CurrentEditRowIndex, fields[CurrentEditCellIndex]);

        }

    }

    }

Please get back to us if you have any concerns.

Regards,

Monisha

[Seth]

This works perfectly, thx.

[Monisha Saravanan]

Hi Seth,

We are glad to hear that the reported issue has been resolved at your end. Kindly get back to us if you have further queries. As always we will be happy to assist you.

Regards,

Monisha