How to edit a check-box directly in the grid ?

[Ben Junior]

In the example below, I attempt to toggle the checkbox value when clicked, but it only responds after multiple clicks.

<SfGrid @ref="Grid" DataSource="@GridData">

    <GridEvents TValue="Employee" CellSelecting="OnCellSelecting" CellSaved="OnCellSaved"></GridEvents>

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

    <GridColumns>

        <GridColumn Field="ID" HeaderText="ID" IsPrimaryKey="true" TextAlign="TextAlign.Center" Width="100"></GridColumn>

        <GridColumn Field="Name" HeaderText="Name" Width="150"></GridColumn>

        <GridColumn Field="IsActive" HeaderText="Active" DisplayAsCheckBox="true" AllowEditing="true" EditType="EditType.BooleanEdit" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

@code {

    private SfGrid<Employee> Grid;

    public List<Employee> GridData { get; set; } = new List<Employee>

    {

        new Employee { ID = 1, Name = "John Doe", IsActive = true },

        new Employee { ID = 2, Name = "Jane Smith", IsActive = false }

    };

    public class Employee

    {

        public int ID { get; set; }

        public string Name { get; set; }

        public bool IsActive { get; set; }

    }

    private async Task OnCellSaved(CellSavedArgs<Employee> args)

    {

        // Ensure that the UI updates immediately

        await Grid.Refresh();

        StateHasChanged();

    }

    private async Task OnCellSelecting(CellSelectingEventArgs<Employee> args)

    {

        // Ensure that clicking the checkbox enters edit mode immediately

        if (args.Data.Name == "IsActive")

        {

            await Grid.StartEditAsync();

        }

    }

}

[Prathap Senthil]

Hi Ben Junior,

We would like to inform you that, by default, the grid in batch editing mode requires a double-click to edit a cell. However, to meet your requirement for single-click editing, we recommend using our single-click batch editing feature. This topic is documented in our User Guide, and we have also provided a modified sample for your reference.

<SfGrid @ref="Grid" DataSource="@GridData">

 

    <GridEvents TValue="Employee" CellSelected="CellSelectHandler" CellSaved="OnCellSaved"></GridEvents>

 

 

</SfGrid>

 

@code {

 

   public async Task CellSelectHandler(Syncfusion.Blazor.Grids.CellSelectEventArgs<Employee> args)

    {

        if(args.CellIndex ==2){

            //get selected cell index

            var CellIndexes = await Grid.GetSelectedRowCellIndexesAsync();

            //get the row and cell index

            var CurrentEditRowIndex = CellIndexes[0].Item1;

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

            //get the available fields

            var Fields = await Grid.GetColumnFieldNamesAsync();

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

            await Grid.EditCellAsync(CurrentEditRowIndex, Fields[CurrentEditCellIndex]);

        }

      

    }

 

}

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

Documentation: https://blazor.syncfusion.com/documentation/datagrid/how-to/single-click-editing-with-batch-mode



Regards,
Prathap Senthil