How to apply customization for parent rows in Blazor Tree Grid?
This Knowledge base explains how to perform Customization for parent rows in Blazor Tree Grid.
It is possible to customize only the parent rows of the Tree Grid component. This can be achieved with the help of RowDataBound event of the Tree Grid. In the arguments of RowDataBound event we get the Row object which can be customized by using AddClass method.
C#
This is demonstrated in the below sample code in which we have applied bold font for the parent records. Refer to the code snippets below
@using Syncfusion.Blazor.TreeGrid;
<SfTreeGrid DataSource="@TreeGridData" @ref="TreeGrid" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
<TreeGridEvents RowDataBound ="RowDataBoundHandler" TValue="TreeData.BusinessObject"></TreeGridEvents>
<TreeGridColumns>
<TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="TaskName" HeaderText="TaskName" Width="160"></TreeGridColumn>
<TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
@code{
public List<TreeData.BusinessObject> TreeGridData { get; set; }
SfTreeGrid<TreeData.BusinessObject> TreeGrid;
protected override void OnInitialized()
{
this.TreeGridData = TreeData.GetSelfDataSource().ToList();
}
public void RowDataBoundHandler(RowDataBoundEventArgs<TreeData.BusinessObject> args)
{
var Source = TreeGrid.GetCurrentViewRecords();
var keys = Source.GroupBy(rec => rec.ParentId).Where(g => g.Key != null).ToDictionary(g => g.Key?.ToString(), g => g.ToList()).Keys.ToList();//collect the ParentId values using GroupBy
if (args.Data.ParentId == null || keys.Contains(args.Data.TaskId.ToString())) // Checking whether it is a parent record by comparing IdMapping field of record with the ParentID values
{
args.Row.AddClass(new string[] { "parent-bold" }); // customized only parent rows
}
}
public class TreeData
{
public class BusinessObject
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public int? Duration { get; set; }
public int? Progress { get; set; }
public string Priority { get; set; }
public int? ParentId { get; set; }
}
public static List<BusinessObject> GetSelfDataSource()
{
List<BusinessObject> BusinessObjectCollection = new List<BusinessObject>();
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Progress = 80, Priority = "Low", ParentId = 1 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Priority = "High", Progress = 77, ParentId = 3 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 });
BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 });
return BusinessObjectCollection;
}
}
}
CSS
<style>
.parent-bold {
font-weight: bold;
}
</style>
Output:-
Fig 1: Customization applied for parent records
Reference:-
Please refer to the following documentation link for more information for RowDataBound event.
https://blazor.syncfusion.com/documentation/treegrid/events/#rowdatabound
Conclusion
I hope you enjoyed learning about how to apply customization for parent rows in Blazor Tree Grid.
You can refer to our Blazor Tree Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Tree Grid example to understand how to create and manipulate data.
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!
