TL;DR: The Blazor TreeGrid introduces powerful enhancements for hierarchical data management, including sticky headers for easier navigation, customizable empty record templates, and observable binding for real-time updates. These features make it ideal for project management, asset tracking, and financial reporting, helping developers build responsive dashboards effortlessly.
The Syncfusion Blazor TreeGrid now includes powerful enhancements to boost functionality and user experience. New features like customizable empty record messages, sticky headers, and observable data binding help teams, from designers to project managers, create intuitive, organized, and visually appealing data views. Designed for industries such as project management, asset tracking, finance, and logistics, these updates simplify complex datasets and deliver dynamic, user-friendly insights.
In this post, we’ll explore practical applications across key sectors and provide examples with implementation steps to help you build impactful Blazor solutions.
Practical applications across industries
The latest TreeGrid features enable clear, actionable data displays for diverse use cases:
- Project management: Guide users with custom empty messages when task lists are empty, and keep hierarchies visible with sticky headers for efficient tracking.
- Asset tracking: Use observable binding for real-time inventory updates, ensuring accurate data for decision-making.
- Financial reporting: Maintain visibility of financial categories with sticky headers and provide context with custom empty messages when no data is available.
- Logistics: Reflect real-time changes in shipment or warehouse hierarchies using observable binding, while sticky headers keep key data accessible.
- Human resources: Display employee hierarchies clearly and use empty messages to communicate when team data is missing.
- Education: Organize course or department hierarchies with real-time schedule updates and guide users when no course data is present.
These capabilities empower developers to build responsive, data-rich Blazor applications tailored for multiple industries.
Customize empty record message
Enhance user experience by personalizing the message or image displayed when the TreeGrid has no data. By default, it shows “No records to display”, but you can easily customize this using the EmptyRecordTemplate property. This allows you to align the empty state with your application’s design and provide helpful context for users.
See the implementation details in the code example below.
@using TreeGridComponent.Data
@using Syncfusion.Blazor.TreeGrid
<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskID" ParentIdMapping="ParentID" HasChildMapping="IsParent" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Delete", "Search", })">
<TreeGridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"/>
<TreeGridTemplates>
<EmptyRecordTemplate>
<div class="emptyRecordTemplate text-center">
<img src="@ImageUrl" class="sf-emptyRecord" alt="No record" />
<span>There is no data available to display at the moment. </span>
</div>
</EmptyRecordTemplate>
</TreeGridTemplates>
<TreeGridColumns>
<TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="120" IsPrimaryKey="true" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="200"></TreeGridColumn>
<TreeGridColumn Field="Priority" HeaderText="Priority " Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="Assignee" HeaderText="Assignee" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="Status" HeaderText="Status" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
@code{
public List<TreeData> TreeGridData { get; set; }
protected override void OnInitialized()
{
this.TreeGridData = TreeData.GetSelfDataSource().ToList();
}
public string ImageUrl = "data:image/svg+xml;base64...."
}
Note: Learn more in the empty record template documentation and check the output preview below to see how it looks in action.
Sticky headers or improved navigation
The TreeGrid now supports sticky headers, keeping column headers fixed at the top during vertical scrolling. This feature improves readability and ensures column headers remain visible when navigating large datasets. To enable it, set the EnableStickyHeader property to true. Sticky headers are especially useful in applications like asset tracking or financial reporting, where maintaining header visibility enhances data interpretation.
See the code snippet below to learn how to enable sticky headers in your Blazor TreeGrid.
@page "/tree-grid/sticky-header"
@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
<div class="col-lg-12 control-section">
<div class="content-wrapper">
<div class="row">
<div class="treestickyheader">
<SfTreeGrid @ref="TreeGrid" DataSource="@AssetData" IdMapping="AssetID" ParentIdMapping="ParentID" TreeColumnIndex="1" EnableStickyHeader="true"
<TreeGridColumns>
<TreeGridColumn Field="AssetID" HeaderText="Asset ID" Width="110" IsPrimaryKey="true" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="AssetName" HeaderText="Asset Name" Width="225" ></TreeGridColumn>
<TreeGridColumn Field="SerialNumber" HeaderText="Serial Number" Width="125" ></TreeGridColumn>
<TreeGridColumn Field="AssetType" HeaderText="Category" Width="90" ></TreeGridColumn>
<TreeGridColumn Field="Status" HeaderText="Status" Width="88" ></TreeGridColumn>
<TreeGridColumn Field="PurchaseDate" HeaderText="Purchase Date" Format="dd/MM/yyyy" Type="ColumnType.Date" Width="126" TextAlign="TextAlign.Right" ></TreeGridColumn>
<TreeGridColumn Field="WarrantyEndDate" HeaderText="Warranty Expire Date" Format="dd/MM/yyyy" Type="ColumnType.Date" Width="173" TextAlign="TextAlign.Right" ></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
</div>
</div>
</div>
</div>
Note: Learn more in the stick header documentation, and view the output preview below to see it in action.
Observable binding for real-time data updates
The TreeGrid now supports observable collections, enabling real-time data updates without manual refresh. Any changes, such as adding, removing, or modifying records, are automatically reflected in the UI. This is achieved by using .NET’s ObservableCollection, which implements INotifyCollectionChanged and INotifyPropertyChanged interfaces to notify the UI of data changes.
This feature is ideal for dynamic applications like logistics tracking or employee management, where data changes frequently. Learn more about Observable Collection in this documentation and try our demo. Check the screenshot below to see this feature in action.
Why these features matter
Customizable empty record messages, sticky headers, and observable binding in the Syncfusion Blazor TreeGrid address real-world challenges, such as managing hierarchical data, enhancing navigation, and enabling real-time updates. These enhancements simplify data presentation, improve usability, and allow teams to make faster, informed decisions by creating intuitive interfaces.
Conclusion
The latest Blazor TreeGrid enhancements, customizable empty record messages, sticky headers, and observable data binding, address real-world challenges such as managing hierarchical data, improving navigation, and enabling real-time updates. These features simplify data presentation, improve usability, and allow teams to make faster, informed decisions by creating intuitive interfaces.
Explore more through the official documentation, demos, and resources to integrate these capabilities into your projects. If you’re a Syncfusion user, download the setup from the license and downloads page. Otherwise, start with a free 30-day trial. For queries, reach out via our support forum, support portal, or feedback portal, we’re always happy to assist!
Related Blogs
- Enhancing Data Visualization with a Nested Grid UI in Blazor TreeGrid
- Best Practices for Fonts in Blazor Charts for Better Data Visualization
- Blazor Radar Charts: Visualizing Football Defending Stats Made Easy
- How to Build a Blazor HeatMap Chart to Visualize Global Temperature Anomalies
This article was originally published at Syncfusion.com.
Top comments (0)