How to select records using checkbox column in Blazor Tree Grid?
The Syncfusion Blazor Tree Grid component provides support to select Tree Grid records with hierarchy selection functionality using checkbox column. We can render checkbox column by using ShowCheckbox property in column definition and select records at initial rendering using SelectCheckboxesAsync method based on certain condition.
SelectCheckboxesAsync Method :
- Using SelectCheckboxesAsync method, we can check/uncheck checkboxes rendered in Tree Grid column which in turn select/unselect Tree Grid records.
- The index/indices of the record(s) to be selected must be passed as a parameter to the “SelectCheckboxesAsync” method.
- In this example, we have checked particular column’s value (field value) and selected the record based on its value in DataBound event of Tree Grid.
- This solution will work even if we dynamically change the PageSize of Tree Grid using PageSizes property.
@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using System;
@using System.Collections.Generic;
<SfTreeGrid @ref="_treeGrid" DataSource="@TreeGridData" IdMapping="TaskID"
ParentIdMapping="ParentID" Height="315" TreeColumnIndex="1" AllowPaging="true">
<TreeGridPageSettings PageSizes="@PageSizes" PageCount="5" PageSize="2"></TreeGridPageSettings>
<TreeGridEvents OnActionBegin="ActionBeginHandler" DataBound="OnDataBound" TValue="SelfReferenceData"></TreeGridEvents>
<TreeGridColumns>
<TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" IsPrimaryKey="true" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn ShowCheckbox Width="120"></TreeGridColumn>
<TreeGridColumn Field="TaskName" HeaderText="Task Name"></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
@code{
public List<SelfReferenceData> TreeGridData { get; set; }
public SfTreeGrid<SelfReferenceData> _treeGrid = new SfTreeGrid<SelfReferenceData>();
public List<string> PageSizes { get; set; }
public Boolean flag = false;
public Boolean alreadyChecked = false;
public Boolean alreadyChecked2 = false;
protected override void OnInitialized()
{
this.TreeGridData = SelfReferenceData.GetTree();
this.PageSizes = new List<string>() { "2", "4", "5", "10", "15", "20", "All" };
}
public List<int> SelectedNodeIndex = new List<int>();
public async Task OnDataBound(object args)
{
var recs = this._treeGrid.GetCheckedRecords();
var indx = this._treeGrid.GetCheckedRowIndexes();
var currentData = this._treeGrid.GetCurrentViewRecords();
if (recs.Result.Count != 0)
{
if (currentData.Count > this._treeGrid.PageSettings.PageSize * this._treeGrid.PageSettings.PageCount)
{
var index2 = 0;
foreach (var data2 in currentData)
{
alreadyChecked2 = false;
foreach (var check2 in recs.Result)
{
if (data2.TaskID == check2.TaskID
{
alreadyChecked2 = true;
}
}
if (!alreadyChecked2)
{
if (data2.Progress == "Open")
{
SelectedNodeIndex.Add(index2);
}
}
index2++;
}
alreadyChecked2 = false;
}
else
{
foreach (var data1 in currentData)
{
foreach (var check in recs.Result)
{
if (data1.TaskID == check.TaskID)
{
alreadyChecked = true;
}
}
}
if (!alreadyChecked)
{
var dataSource = this._treeGrid.GetCurrentViewRecords();
var index = 0;
foreach (var data in dataSource)
{
if (data.Progress == "Open")
{
SelectedNodeIndex.Add(index);
}
index++;
}
}
}
}
else
{
var dataSource = this._treeGrid.GetCurrentViewRecords();
var index = 0;
foreach (var data in dataSource)
{
if (data.Progress == "Open")
{
SelectedNodeIndex.Add(index);
}
index++;
}
}
if (!alreadyChecked)
{
await this._treeGrid.SelectCheckboxesAsync(SelectedNodeIndex);
}
alreadyChecked = false;
}
public void ActionBeginHandler(ActionEventArgs<SelfReferenceData> args)
{
if (args.RequestType.ToString() == "Paging")
{
SelectedNodeIndex.Clear();
SelectedNodeIndex = new List<int>();
}
}
}
Figure 1: Select rows in Tree Grid using SelectCheckboxesAsync method
You can use the demo from this Link to implement the same functionality on your own.
Conclusion
I hope you enjoyed learning how to select records using checkbox column in Blazor Tree Grid.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
