Loading...
Loading...
Implements the Syncfusion Blazor TreeGrid (SfTreeGrid) for hierarchical or self‑referential data with expandable nodes and nested row structures. Use this skill when building tree‑view workflows in Blazor Server, WebAssembly, Web App, or MAUI applications. Supports GraphQL binding, templates, sorting, filtering, editing, paging, aggregates, search, exporting, virtualization, clipboard actions, and state management for rich hierarchical data experiences.
npx skill4agent add syncfusion/blazor-ui-components-skills syncfusion-blazor-treegridSfTreeGrid<TValue>GraphQLAdaptorSfTreeGridTreeGridColumnTreeGridEditSettingsTreeGridEventsreferences/events.md<TreeGridEvents>OnSortChangeSortingSortedOnFilterChangeFilteringFilteredreferences/events.md⚠️ Read ALL reference files that apply — not just the one most obvious from the query.
Syncfusion.Blazor.TreeGridSyncfusion.Blazor.Grids@using Syncfusion.Blazor.Grids;_Imports.razorActionEventArgsRowDataBoundEventArgsBeforeCopyPasteEventArgsActionAction.SortingAction.SaveTreeGridPageSettingsTreeGridFilterSettingsTreeGridSelectionSettingsSyncfusion.Blazor.TreeGrid@using Syncfusion.Blazor.TreeGrid;Syncfusion.Blazor.GridsRowExpandingEventArgs<TValue>RowExpandedEventArgs<TValue>RowCollapsingEventArgs<TValue>RowCollapsedEventArgs<TValue>CheckBoxChangeEventArgs<TValue>| Type | Namespace | Example |
|---|---|---|
| FilterType | TreeGrid | |
| EditMode | TreeGrid | |
| CopyHierarchyType | TreeGrid | |
| Action | Grids | |
| TextAlign | Grids | |
| ColumnType | Grids | |
| EditType | Grids | |
| SelectionMode | Grids | |
| SelectionType | Grids | |
| ClipMode | Grids | |
| GridLine | Grids | |
| AggregateType | Grids | |
| CellSelectionMode | Grids | |
<SfTreeGrid DataSource="@TreeData"
IdMapping="TaskId"
ParentIdMapping="ParentId"
TreeColumnIndex="1"
AllowSorting="true"
AllowFiltering="true"
AllowPaging="true">
<TreeGridColumns>
<TreeGridColumn Field="TaskId" HeaderText="ID" Width="80" IsPrimaryKey="true" />
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="200" />
<TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" />
<TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" />
</TreeGridColumns>
</SfTreeGrid>IdMappingParentIdMappingTreeColumnIndex_Imports.razorProgram.csIdMappingParentIdMappingTreeColumnIndexOnActionFailureSfDataManagerDataAdaptorReadReadAsyncGraphQLAdaptorGraphQLAdaptorOptionsDataManagerRequestInputColumnTypeFormatTextAlignQueryCellInfoCustomAttributesClipModeGridLinesAllowSortingSortComparerSortColumnAsyncClearSortingAsyncAllowFilteringFilterTypeFilterByColumnAsyncFilterTemplateSearchAsyncGridSearchSettingsValidationRules@using Syncfusion.Blazor.Grids<TreeGridEvents>RowDataBoundAllowPagingTreeGridPageSettingsPageSizeEnableVirtualizationEnableColumnVirtualizationEnableToolbarItemsAsyncOnToolbarClickContextMenuItemsContextMenuItemClickedExportToExcelAsyncExportToPdfAsyncPrintAsyncFrozenRowsIsFrozenFreezeDirectionAllowFreezeLineMovingEnableStickyHeaderScrollIntoViewAsyncTreeGridAggregateColumnFieldTypeAggregateTypeFooterTemplateShowChildSummaryCopyAsyncCopyHierarchyModeBeforeCopyPasteEnableAutoFillEnableAdaptiveUIEnablePersistenceTreeGridEvents<TValue>OnActionBeginOnActionCompleteRowDataBoundQueryCellInfoSyncfusion.Blazor.TreeGrid_Imports.razor@using Syncfusion.Blazor
@using Syncfusion.Blazor.TreeGridwwwroot/index.htmlApp.razor<link href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />Program.csbuilder.Services.AddSyncfusionBlazor();@using Syncfusion.Blazor.TreeGrid
<SfTreeGrid DataSource="@TreeData" IdMapping="Id" ParentIdMapping="ParentId" TreeColumnIndex="1">
<TreeGridColumns>
<TreeGridColumn Field="Id" HeaderText="ID" Width="80" IsPrimaryKey="true" />
<TreeGridColumn Field="Name" HeaderText="Name" Width="200" />
<TreeGridColumn Field="Status" HeaderText="Status" Width="120" />
</TreeGridColumns>
</SfTreeGrid>
@code {
public class TaskItem
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Name { get; set; }
public string Status { get; set; }
}
private List<TaskItem> TreeData = new()
{
new TaskItem { Id = 1, ParentId = null, Name = "Project Alpha", Status = "In Progress" },
new TaskItem { Id = 2, ParentId = 1, Name = "Design Phase", Status = "Done" },
new TaskItem { Id = 3, ParentId = 1, Name = "Development", Status = "In Progress" },
new TaskItem { Id = 4, ParentId = 3, Name = "Backend API", Status = "Pending" },
};
}<SfTreeGrid @ref="TreeGridRef"
DataSource="@TreeData"
IdMapping="Id"
ParentIdMapping="ParentId"
TreeColumnIndex="1"
AllowSorting="true"
AllowFiltering="true"
AllowPaging="true"
Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel" })">
<TreeGridEditSettings AllowAdding="true"
AllowEditing="true"
AllowDeleting="true"
Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row" />
<TreeGridPageSettings PageSize="10" />
<TreeGridColumns>
<TreeGridColumn Field="Id" IsPrimaryKey="true" Visible="false" />
<TreeGridColumn Field="Name" HeaderText="Task" Width="220" />
<TreeGridColumn Field="Duration" HeaderText="Days" Width="100" />
<TreeGridColumn Field="Progress" HeaderText="%" Width="100" />
</TreeGridColumns>
</SfTreeGrid>
@code {
private SfTreeGrid<TaskItem> TreeGridRef;
// ... data and model
}<SfTreeGrid @ref="TreeGridRef" AllowExcelExport="true" AllowPdfExport="true"
Toolbar="@(new List<string> { "ExcelExport", "PdfExport" })">
<TreeGridEvents TValue="TaskItem" OnToolbarClick="ToolbarClickHandler" />
...
</SfTreeGrid>
@code {
private SfTreeGrid<TaskItem> TreeGridRef;
private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id.Contains("excelexport"))
await TreeGridRef.ExportToExcelAsync();
else if (args.Item.Id.Contains("pdfexport"))
await TreeGridRef.ExportToPdfAsync();
}
}