Multiple click to change status to checkbox into grid

[Lorenzo]

Hi, i have a problem with checkbox column into a grid.

I need to click several times before change the status of checkbox.

This is my grid:

<SfGrid @ref="@grid" DataSource="@DefaultDocumentRowViewModels" AllowSorting="true" AllowPaging="true" AllowFiltering="true" AllowExcelExport="true">

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

            <GridSortSettings>

                <GridSortColumns>

                    <GridSortColumn Field="Checked" Direction="SortDirection.Descending"></GridSortColumn>

                </GridSortColumns>

            </GridSortSettings>

            <GridColumns>

                <GridColumn Field=@nameof(DefaultDocumentRowViewModel.Id) HeaderText="ID" IsPrimaryKey="true" Visible="false"></GridColumn>

                <GridColumn Field=@nameof(DefaultDocumentRowViewModel.Code) HeaderText="Code" AutoFit="true" AllowEditing="false"></GridColumn>

                <GridColumn Field=@nameof(DefaultDocumentRowViewModel.Description) HeaderText="Description" AllowEditing="false"></GridColumn>

                <GridColumn Field=@nameof(DefaultDocumentRowViewModel.Value) HeaderText="Value" AutoFit="true" AllowEditing="false"></GridColumn>

                <GridColumn Field=@nameof(DefaultDocumentRowViewModel.Checked) HeaderText="Active" AutoFit="true" DisplayAsCheckBox="true"></GridColumn>

            </GridColumns>

        </SfGrid>

How can i solve ?

[Vignesh Natarajan]

Hi Lorenzo,  

Thanks for contacting Syncfusion support.  

Query: “I need to click several times before change the status of checkbox.” 

We would like to inform you that by default Grid cell will go into edit mode by pressing the column double time. Once cell is double tab/pressed, cell will go into edit mode, then we can edit checkbox to save the changes in Grid. This is default behavior of the Grid.   

If you want to edit the Grid column in single click, we have already documented this topic in our UG documentation. Kindly refer the below documentation to perform single click editing while using Batch Edit mode.  

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

Kindly get back to us if you have further queries or if you want to perform the changes directly in Grid column without going into edit mode. 

Regards, 

Vignesh Natarajan  

[Lorenzo]

I want that when you click the checkbox it immediately changes from true / false with just one click!

Currently two clicks are always required, because the first starts the edit mode

[Vignesh Natarajan]

Hi Lorenzo,  

 

Thanks for the update. 

 

Query: “I want that when you click the checkbox it immediately changes from true / false with just one click!” 

 

We suggest you to achieve your requirement using ColumnTemplate feature and UpdateCellAsync method of Grid. Using ColumnTemplate feature we can render a editable checkBox column. Upon changing the value, we have updated the changes in Grid cell using UpdateCellAsync method.  

 

Refer the below code example.  

 

<SfGrid  @ref="GridInstance" DataSource="@OrderData" Toolbar=@ToolbarItems>    

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

        <GridColumns> 

            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Center" Width="120"></GridColumn> 

            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" TextAlign="TextAlign.Center" Width="130"></GridColumn> 

            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" EditType="EditType.NumericEdit" TextAlign="TextAlign.Center" Width="130"></GridColumn> 

            <GridColumn Field=@nameof(Order.ShipName) HeaderText="Ship Name" TextAlign="TextAlign.Center" EditType="EditType.DropDownEdit" Width="120"></GridColumn> 

            <GridColumn Field=@nameof(Order.Verified) HeaderText="Verified" EditType="EditType.BooleanEdit" TextAlign="TextAlign.Center" DisplayAsCheckBox="true" Width="120"> 

                <Template> 

                    @{ 

                        var ord = context as Order; 

                        <SfCheckBox @bind-Checked="ord.Verified" ValueChange="@((args)=>OnChange(args, ord))" TChecked="bool"></SfCheckBox> 

                    } 

                </Template> 

  

            </GridColumn> 

        </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> GridInstance { get; set; } 

    public string[] ToolbarItems = new string[] { "Add", "Edit", "Delete", "Update", "Cancel" }; 

    public async Task OnChange(ChangeEventArgs<bool> args, Order ord) 

    {         

        var rowIndex = await GridInstance.GetRowIndexByPrimaryKeyAsync(ord.OrderID); 

        await GridInstance.UpdateCellAsync(rowIndex, "Verified", args.Checked); 

    } 

 

 

Kindly refer the below modified sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169093/ze/DataGrid_Server-1134274856.zip 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns#column-template 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan