Set Checkbox Column Selection on Initial Render in TreeGrid

[Tien Pham]

I am currently working with the Syncfusion TreeGrid component and need assistance in setting the checkbox (checkbox column) to be selected on the initial render.
Code Sample:

<SfTreeGrid @ref="TreeGrid" class="custom-tree-grid" IdMapping="TaskId" ParentIdMapping="ParentId"
DataSource="@TreeData" TreeColumnIndex="1"
AutoCheckHierarchy="true">
    <TreeGridEvents  TValue="BusinessObject"></TreeGridEvents>
    <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" NewRowPosition="Syncfusion.Blazor.TreeGrid.RowPosition.Child" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row"></TreeGridEditSettings>
    <TreeGridColumns>
        <TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
        <TreeGridColumn Field="TaskName" ShowCheckbox="true" HeaderText="Task Name" Width="150"></TreeGridColumn>
    </TreeGridColumns>
</SfTreeGrid>

@code {
    public class BusinessObject
    {
        public int TaskId { get; set; }
        public string TaskName { get; set; }
        public DateOnly? StartDate { get; set; }
        public TimeOnly? StartTime { get; set; }
        public int Duration { get; set; }
        public int Progress { get; set; }
        public string Priority { get; set; }
        public int? ParentId { get; set; }
    }

    public List<BusinessObject> TreeData = new List<BusinessObject>();

    SfTreeGrid<BusinessObject> TreeGrid;

    public async Task AddTopic(BusinessObject args)
    {
        var indexVal = this.TreeGrid.GetCurrentViewRecords().FindIndex(a => a.TaskId == args.TaskId);
        if (indexVal != -1)
        {
            await this.TreeGrid.SelectRowAsync(indexVal); // select the clicked row
            await this.TreeGrid.AddRecordAsync(); // add row to the selected row as child
        }
    }

    protected override void OnInitialized()
    {
        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "Number 1" });
        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Number 2" });
        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Number 3" });
        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Number 1" });
        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Number 4" });
        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Number 2" });
        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "Number 4" });
        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Number 3" });
        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Number 1" });
    }
}

[Shek Mohammed Asiq Abdul Jabbar]

Hi Tien Pham,

Greetings from Syncfusion support.

To select the checkboxes at initial rendering, you can use SelectCheckboxesAsync method in DataBound event. Please refer to the following code snippet.

public void DataBound()

        {

            var indexes = new List<int>(){1, 2};

            TreeGrid.SelectCheckboxesAsync(indexes.ToArray());

        }

Sample: https://blazorplayground.syncfusion.com/BDhyNsVWVSZnuwdN

Kindly get back to us fir further assistance.

Regards,

Shek