Unintended checkbox selection when using inline editing with single click

[Tien Pham]

First, i show my code:

<SfGrid @ref="Grid"
        DataSource="OrderData"
        AllowPaging="true" AllowReordering="true"
        AllowResizing="true" AllowFiltering="false"
        EnableAutoFill="false" AllowSelection="true"
        EnableStickyHeader="true"
        Height="100%"
        GridLines="GridLine.Both">
    <GridEvents Created="Created" CellSelected="CellSelectHandler" TValue="OrderDetails"/>
    <GridEditSettings ShowConfirmDialog="false"
                      AllowEditOnDblClick="false"
                      AllowAdding="true"
                      AllowEditing="true"
                      AllowDeleting="true"
                      Mode="EditMode.Batch" />
    <GridSelectionSettings Type="SelectionType.Multiple"
                           Mode="SelectionMode.Both" 
                           PersistSelection="true" 
                           CheckboxOnly="true"/>
    <GridPageSettings PageSize="5"></GridPageSettings>
    <GridColumns>
        <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn>
        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="140"></GridColumn>
        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
        <GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="100"></GridColumn>
        <GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

<script>
    function SelectAll() {    document.getElementsByClassName("e-checkselectall")[0].click();}
</script>

// Logic code:

public class OrderDetails
{
    public static List<OrderDetails> order = new List<OrderDetails>();
    public OrderDetails() { }
    public OrderDetails(int orderID, string customerId, double freight, string shipCountry)
    {
        this.OrderID = orderID;
        this.CustomerID = customerId;
        this.Freight = freight;
        this.ShipCountry = shipCountry;
    }
    public static List<OrderDetails> GetAllRecords()
    {
        if (order.Count == 0)
        {
            string[] customerIds = { "VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH" };
            string[] countries = { "France", "Germany", "Brazil", "USA", "Sweden", "Venezuela", "Mexico", "Austria", "Finland", "UK" };
            Random rand = new Random();
            for (int i = 1; i <= 50; i++)
            {
                int orderId = 10247 + i;
                string customerId = customerIds[rand.Next(customerIds.Length)];
                double freight = Math.Round(rand.NextDouble() * 200, 2);
                string country = countries[rand.Next(countries.Length)];
                order.Add(new OrderDetails(orderId, customerId, freight, country));
            }
        }
        return order;
    }
    public int OrderID { get; set; }
    public string CustomerID { get; set; }
    public double? Freight { get; set; }
    public string ShipCountry { get; set; }
}

[Inject] private IJSRuntime IJsRuntime { get; set; }
private SfGrid<OrderDetails> Grid;
public List<OrderDetails> OrderData { get; set; }
private List<OrderDetails> selectedRecords;
private bool DialogVisible { get; set; } = false;

protected override void OnInitialized()
{
    OrderData = OrderDetails.GetAllRecords();
}

public async Task Created()
{
    await IJsRuntime.InvokeAsync<object>("SelectAll");
}

public async Task CellSelectHandler(CellSelectEventArgs<OrderDetails> args)
{
    var cellIndexes = await Grid.GetSelectedRowCellIndexesAsync();
    var currentEditRowIndex = cellIndexes[0].Item1;
    var currentEditCellIndex = (int)cellIndexes[0].Item2;
    var fields = await Grid.GetColumnFieldNamesAsync();

    if (fields[currentEditCellIndex] != string.Empty)
    {
        await Grid.EditCellAsync(currentEditRowIndex, fields[currentEditCellIndex]);
    }
}

I am using Syncfusion for two purposes:

1. To select all checkbox records using the Created event and a JavaScript SelectAll function – this works as expected.

2. To enable inline editing on a single click, following the documentation here: https://blazor.syncfusion.com/documentation/datagrid/batch-editing#how-to-make-editing-in-single-click-and-arrow-keys – this also works correctly.

However, when I combine both features, an unexpected behavior occurs.
For example, if I uncheck the checkbox in row 1 and then single-click on the "Order ID" field to edit it inline, the checkbox in that row gets automatically selected again. This is not the behavior I want.

Step1: Uncheck row 1

Step2: Single click cell Order Id for edit inline -> it auto select checkbox -> not expected

Expected behavior: The checkbox should only be selected when the user explicitly clicks on the checkbox itself, not when clicking on a cell to trigger inline editing.

[Prathap Senthil]

Hi Tien,

Based on the reported problem, we would like to clarify that when you edit a row, the row will be selected. This is the default behavior, which is why you experienced this situation. If you uncheck the checkbox in a row and then single-click on the 'Order ID' field, the checkbox in that row gets automatically selected again. This is the expected behavior. Thank you for your understanding.

Regards,
Prathap Senthil