We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Direct Edit type checkbox

2022-11-01 19_34_32-4_Client_BlazorServerTelerik.png Hi, im using treegrid for edit these value is true or false. can we make the checkbox direct edit without double click first?

3 Replies 1 reply marked as answer

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 3, 2022 12:40 PM

Hi Rafa,  

Query#:- im using treegrid for edit these value is true or false. can we make the checkbox direct edit without double click first?

If you want to edit the TreeGrid 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.  

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

Otherwise you can use ColumnTemplate feature of the TreeGrid. Using ColumnTemplate feature we can render a editable checkBox column. Upon changing the value, we have updated the changes in TreeGrid cell using UpdateCell method using ValueChange event of SfCheckBox.

Refer to the code below:-

<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">

    <TreeGridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Batch"   />


        <TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>

            .    .    .

         <TreeGridColumn Field="Approved" HeaderText="Verified" Type="Syncfusion.Blazor.Grids.ColumnType.Boolean" DisplayAsCheckBox="true" EditType="Syncfusion.Blazor.Grids.EditType.BooleanEdit" Width="80">



                        var ord = context as TreeData.BusinessObject;

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









     SfTreeGrid<TreeData.BusinessObject> TreeGrid;

    public List<TreeData.BusinessObject> TreeGridData { get; set; }

      public async Task OnChange(ChangeEventArgs<bool> args, TreeData.BusinessObject ord)


        var rowIndex = await TreeGrid.GetRowIndexByPrimaryKey(ord.TaskId);

        await TreeGrid.UpdateCell(rowIndex, "Approved", args.Checked);    //updateCell method to update the checkbox changes



    protected override void OnInitialized()


        this.TreeGridData = TreeData.GetSelfDataSource().ToList();


      .  .    .



Documentation link:- https://blazor.syncfusion.com/documentation/treegrid/columns/column-template


For cellMode, you can use setCellValue method on ValueChange event to update the checkbox changes.


If your requirement is different from above, share details such as specific EditMode/code details/ Screenshot or any additional details to proceed further.


Farveen sulthana T

Note:-  If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

RA rafa November 3, 2022 10:47 PM

Thankyou Farveen, can you put here these code for more references. actually i've done with this setting & template. live checked and also updated the model value.

Marked as answer

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 7, 2022 09:22 AM

Hi Rafa,

Thanks for your update. Please get back to us if you need any further assistance.


Farveen sulthana T

Live Chat Icon For mobile
Up arrow icon