syncfusion-blazor-treegrid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor TreeGrid

实现Syncfusion Blazor TreeGrid

The Syncfusion Blazor TreeGrid (

SfTreeGrid<TValue>

) renders hierarchical data in a tabular format with expand/collapse rows. It supports self-referential flat data (IdMapping/ParentIdMapping) and nested child collections, combined with a full suite of grid features including editing, filtering, sorting, virtualization, and export.

Syncfusion Blazor TreeGrid（

SfTreeGrid<TValue>

）以表格形式渲染分层数据，支持行的展开/折叠。它支持自引用扁平数据（IdMapping/ParentIdMapping）和嵌套子集合，同时具备完整的网格功能，包括编辑、筛选、排序、虚拟化和导出。

When to Use This Skill

何时使用本技能

User needs a hierarchical/tree-structured data table in a Blazor app
User mentions SfTreeGrid, TreeGrid, IdMapping, ParentIdMapping
User needs parent-child rows with expand/collapse in a grid
User needs CRUD operations on tree-structured data
User needs to export, filter, sort, or page hierarchical data
User needs to bind TreeGrid to a GraphQL API using
```
GraphQLAdaptor
```
User is working with organizational charts, task hierarchies, bill of materials, file explorer-style data in grid form
User migrating from flat DataGrid to hierarchical TreeGrid
User setting up TreeGrid in a Blazor Web App, WASM, Server, or MAUI project

Trigger keywords: TreeGrid, Tree Grid, SfTreeGrid, hierarchical grid, parent-child grid, IdMapping, ParentIdMapping, tree data table, nested grid rows, Syncfusion Blazor tree, GraphQL TreeGrid, GraphQLAdaptor TreeGrid

用户需要在Blazor应用中使用分层/树形结构的数据表格
用户提及SfTreeGrid、TreeGrid、IdMapping、ParentIdMapping
用户需要在网格中使用带展开/折叠功能的父子行
用户需要对树形结构数据执行CRUD操作
用户需要对分层数据进行导出、筛选、排序或分页
用户需要使用
```
GraphQLAdaptor
```
将TreeGrid绑定到GraphQL API
用户在网格中处理组织结构图、任务层级、物料清单、文件浏览器样式的数据
用户从扁平DataGrid迁移到分层TreeGrid
用户在Blazor Web App、WASM、Server或MAUI项目中配置TreeGrid

触发关键词： TreeGrid、Tree Grid、SfTreeGrid、hierarchical grid、parent-child grid、IdMapping、ParentIdMapping、tree data table、nested grid rows、Syncfusion Blazor tree、GraphQL TreeGrid、GraphQLAdaptor TreeGrid

🔒 Mandatory Key Rules

🔒 强制核心规则

These rules govern how this skill MUST behave. They are mandatory and must be strictly followed.

以下规则约束本技能的行为，属于强制要求，必须严格遵守。

1. Purpose and Responsibility

1. 目的与职责

Your responsibility is to interpret any natural‑language user request and provide accurate, complete, and validated information about all supported aspects of the Syncfusion Blazor TreeGrid, including:

Public APIs
Properties
Events
Features
Behaviors

你的职责是解析用户的自然语言请求，并提供关于Syncfusion Blazor TreeGrid所有支持功能的准确、完整且经过验证的信息，包括：

公开API
属性
事件
功能
行为

2. Accuracy and API Compliance

2. 准确性与API合规性

The Skill MUST:

Use only officially supported Syncfusion TreeGrid features.
NEVER invent APIs, methods, properties, events, behaviors, or future features.
NEVER provide unsupported or hypothetical code samples.
ALWAYS follow official Syncfusion component design patterns.

If a feature is not supported: clearly state the limitation and suggest a supported alternative when possible.

本技能必须：

仅使用官方支持的Syncfusion TreeGrid功能。
绝不虚构API、方法、属性、事件、行为或未来功能。
绝不提供不支持或假设的代码示例。
始终遵循官方Syncfusion组件设计模式。

如果某项功能不被支持：请明确说明限制，并在可能的情况下建议支持的替代方案。

3. Interpreting Natural-Language Requests

3. 解析自然语言请求

When user requests are incomplete:

Infer reasonable assumptions using official TreeGrid best practices.
Fill missing gaps with accurate and relevant information.
Request clarification only when essential.

当用户请求不完整时：

使用官方TreeGrid最佳实践推断合理假设。
用准确且相关的信息填补缺失的内容。
仅在必要时请求澄清。

4. Handling Unsupported User Requests

4. 处理不支持的用户请求

If the user asks for an unsupported capability:

Explicitly state that it is not supported
Suggest official alternatives or valid workarounds
NEVER simulate or fabricate impossible functionality

如果用户要求不支持的功能：

明确说明该功能不被支持
建议官方替代方案或有效的解决方法
绝不模拟或编造不可能实现的功能

5. Design Pattern Enforcement

5. 设计模式强制执行

The Skill MUST follow Syncfusion official patterns, including:

Correct component structure (

SfTreeGrid

TreeGridColumn

TreeGridEditSettings

TreeGridEvents

, etc.)

Proper async event and API usage
Valid configuration properties and enums
Supported data‑binding approaches (self-referential, hierarchical, remote, custom adaptor, GraphQL)
Real event patterns and names

本技能必须遵循Syncfusion官方模式，包括：

正确的组件结构（

SfTreeGrid

、

TreeGridColumn

、

TreeGridEditSettings

、

TreeGridEvents

等）

正确的异步事件和API使用方式
有效的配置属性和枚举
支持的数据绑定方式（自引用、分层、远程、自定义适配器、GraphQL）
真实的事件模式和名称

6. Quality, Completeness & Reliability

6. 质量、完整性与可靠性

The Skill MUST:

Use only validated and real TreeGrid capabilities
Provide actionable and implementation‑ready guidance
Ensure clarity so users can follow without guesswork
Maintain clean, readable, and professional formatting

本技能必须：

仅使用经过验证的真实TreeGrid功能
提供可操作、可直接实现的指导
确保内容清晰，用户无需猜测即可遵循
保持简洁、易读且专业的格式

7. No-Hallucination Safeguard

7. 防幻觉保障

The Skill MUST NOT:

Invent non‑existent APIs or behavior
Suggest unsupported modes, features, or configuration
Provide incorrect, misleading, or unverifiable code
Describe undocumented internal behavior

If unsure: ask for clarification OR clearly state the limitation.

本技能绝不能：

虚构不存在的API或行为
建议不支持的模式、功能或配置
提供错误、误导或无法验证的代码
描述未公开的内部行为

如果不确定：请请求澄清或明确说明限制。

8. Event Name Verification Requirement

8. 事件名称验证要求

CRITICAL: Event names MUST be verified against

references/events.md

BEFORE providing code examples. All tree grid events MUST be defined inside the

<TreeGridEvents>

component

Common Mistakes to Avoid:

❌
```
OnSortChange
```
— Does NOT exist. Use
```
Sorting
```
,
```
Sorted
```
instead
❌
```
OnFilterChange
```
— Does NOT exist. Use
```
Filtering
```
,
```
Filtered
```
instead

Rule: ALWAYS cross-reference

references/events.md

for:

Exact event names (case-sensitive)
Event argument types (see Rule 11 for namespace resolution)
Whether events are cancelable (✅ or ❌)
When they fire (before/after operation)

关键： 在提供代码示例之前，必须对照

references/events.md

验证事件名称。所有树形网格事件必须定义在

<TreeGridEvents>

组件内部

常见错误需避免：

❌
```
OnSortChange
```
— 不存在。请使用
```
Sorting
```
、
```
Sorted
```
替代
❌
```
OnFilterChange
```
— 不存在。请使用
```
Filtering
```
、
```
Filtered
```
替代

规则： 始终对照

references/events.md

交叉验证：

准确的事件名称（区分大小写）
事件参数类型（请参阅规则11了解命名空间解析）
事件是否可取消（✅ 或 ❌）
事件触发时机（操作前/后）

9. Read Reference Files Before Writing Code

9. 编写代码前阅读参考文件

Before generating any code, identify every feature in the request and read the reference file for each one. The snippets in this file are abbreviated — they omit critical rules and known pitfalls. Reference files are the authoritative source.

⚠️ Read ALL reference files that apply — not just the one most obvious from the query.

在生成任何代码之前，识别请求中的每个功能，并阅读每个功能对应的参考文件。本文件中的代码片段是简化版——省略了关键规则和已知陷阱。参考文件是权威来源。

⚠️ 阅读所有适用的参考文件——不仅仅是查询中最明显的那一个。

10. Namespace and Type Resolution Rules

10. 命名空间与类型解析规则

Rule 1: Always use full namespace qualification to avoid CS0104 "ambiguous reference" errors. Types exist in both

Syncfusion.Blazor.TreeGrid

and

Syncfusion.Blazor.Grids

namespaces.

Rule 2: Always include

@using Syncfusion.Blazor.Grids;

_Imports.razor

or component to prevent CS0103 "missing reference" errors for:

Event argument types (

ActionEventArgs

RowDataBoundEventArgs

BeforeCopyPasteEventArgs

, etc.)

The
```
Action
```
enum (
```
Action.Sorting
```
,
```
Action.Save
```
, etc.)

Component classes (

TreeGridPageSettings

TreeGridFilterSettings

TreeGridSelectionSettings

, etc.)

Event handler support classes

Rule 3: The following event arg types belong to

Syncfusion.Blazor.TreeGrid

— add

@using Syncfusion.Blazor.TreeGrid;

(NOT

Syncfusion.Blazor.Grids

RowExpandingEventArgs<TValue>

RowExpandedEventArgs<TValue>

RowCollapsingEventArgs<TValue>

RowCollapsedEventArgs<TValue>

```
CheckBoxChangeEventArgs<TValue>
```

Type Reference:

Type	Namespace	Example
FilterType	TreeGrid	`Syncfusion.Blazor.TreeGrid.FilterType.Excel`
EditMode	TreeGrid	`Syncfusion.Blazor.TreeGrid.EditMode.Row`
CopyHierarchyType	TreeGrid	`Syncfusion.Blazor.TreeGrid.CopyHierarchyType.Both`
Action	Grids	`Syncfusion.Blazor.Grids.Action.Save`
TextAlign	Grids	`Syncfusion.Blazor.Grids.TextAlign.Right`
ColumnType	Grids	`Syncfusion.Blazor.Grids.ColumnType.Date`
EditType	Grids	`Syncfusion.Blazor.Grids.EditType.DatePickerEdit`
SelectionMode	Grids	`Syncfusion.Blazor.Grids.SelectionMode.Row`
SelectionType	Grids	`Syncfusion.Blazor.Grids.SelectionType.Multiple`
ClipMode	Grids	`Syncfusion.Blazor.Grids.ClipMode.Ellipsis`
GridLine	Grids	`Syncfusion.Blazor.Grids.GridLine.Horizontal`
AggregateType	Grids	`Syncfusion.Blazor.Grids.AggregateType.Sum`
CellSelectionMode	Grids	`Syncfusion.Blazor.Grids.CellSelectionMode.Box`

规则1： 始终使用完整的命名空间限定，以避免CS0104“模糊引用”错误。类型同时存在于

Syncfusion.Blazor.TreeGrid

和

Syncfusion.Blazor.Grids

命名空间中。

规则2： 始终在

_Imports.razor

或组件中包含

@using Syncfusion.Blazor.Grids;

，以防止CS0103“缺少引用”错误，涉及以下内容：

事件参数类型（

ActionEventArgs

、

RowDataBoundEventArgs

、

BeforeCopyPasteEventArgs

等）

```
Action
```
枚举（
```
Action.Sorting
```
、
```
Action.Save
```
等）

组件类（

TreeGridPageSettings

、

TreeGridFilterSettings

、

TreeGridSelectionSettings

等）

事件处理程序支持类

规则3： 以下事件参数类型属于

Syncfusion.Blazor.TreeGrid

——添加

@using Syncfusion.Blazor.TreeGrid;

（而非

Syncfusion.Blazor.Grids

）：

RowExpandingEventArgs<TValue>

、

RowExpandedEventArgs<TValue>

RowCollapsingEventArgs<TValue>

、

RowCollapsedEventArgs<TValue>

```
CheckBoxChangeEventArgs<TValue>
```

类型参考：

类型	命名空间	示例
FilterType	TreeGrid	`Syncfusion.Blazor.TreeGrid.FilterType.Excel`
EditMode	TreeGrid	`Syncfusion.Blazor.TreeGrid.EditMode.Row`
CopyHierarchyType	TreeGrid	`Syncfusion.Blazor.TreeGrid.CopyHierarchyType.Both`
Action	Grids	`Syncfusion.Blazor.Grids.Action.Save`
TextAlign	Grids	`Syncfusion.Blazor.Grids.TextAlign.Right`
ColumnType	Grids	`Syncfusion.Blazor.Grids.ColumnType.Date`
EditType	Grids	`Syncfusion.Blazor.Grids.EditType.DatePickerEdit`
SelectionMode	Grids	`Syncfusion.Blazor.Grids.SelectionMode.Row`
SelectionType	Grids	`Syncfusion.Blazor.Grids.SelectionType.Multiple`
ClipMode	Grids	`Syncfusion.Blazor.Grids.ClipMode.Ellipsis`
GridLine	Grids	`Syncfusion.Blazor.Grids.GridLine.Horizontal`
AggregateType	Grids	`Syncfusion.Blazor.Grids.AggregateType.Sum`
CellSelectionMode	Grids	`Syncfusion.Blazor.Grids.CellSelectionMode.Box`

Component Overview

组件概览

razor

<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>

Key concepts:

```
IdMapping
```
— property name that uniquely identifies each row
```
ParentIdMapping
```
— property name pointing to the parent row's ID (null/0 = root)
```
TreeColumnIndex
```
— column index that shows the expand/collapse icon (0-based)

razor

<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="任务名称" Width="200" />
        <TreeGridColumn Field="Duration" HeaderText="时长" Width="100" />
        <TreeGridColumn Field="Progress" HeaderText="进度" Width="100" />
    </TreeGridColumns>
</SfTreeGrid>

核心概念：

```
IdMapping
```
— 唯一标识每一行的属性名称
```
ParentIdMapping
```
— 指向父行ID的属性名称（null/0表示根节点）
```
TreeColumnIndex
```
— 显示展开/折叠图标的列索引（从0开始）

Navigation Guide

导航指南

Setup & Getting Started

安装与入门

Read: references/getting-started.md
- NuGet install,
```
_Imports.razor
```
  ,
```
Program.cs
```
  , theme/script setup, basic grid,
```
IdMapping
```
  /
```
ParentIdMapping
```
  /
```
TreeColumnIndex
```
  , expand-collapse all,
```
OnActionFailure
```

阅读： references/getting-started.md
- NuGet安装、
```
_Imports.razor
```
  配置、
```
Program.cs
```
  配置、主题/脚本设置、基础网格、
```
IdMapping
```
  /
```
ParentIdMapping
```
  /
```
TreeColumnIndex
```
  、全部展开/折叠、
```
OnActionFailure
```

Data Binding

数据绑定

Read: references/data-binding.md
- Self-referential flat data, hierarchical nested children, remote URL/OData/Web API,
```
SfDataManager
```
  , load on demand
Read: references/custom-binding.md
- ```
DataAdaptor
```
  override,
```
Read
```
  /
```
ReadAsync
```
  , Insert/Update/Delete, paging & sorting support, self-referential only
Read: references/graphql.md
- Hot Chocolate server,
```
GraphQLAdaptor
```
  ,
```
GraphQLAdaptorOptions
```
  ,
```
DataManagerRequestInput
```
  , CRUD mutations, cascading delete, CORS

阅读： references/data-binding.md
- 自引用扁平数据、分层嵌套子项、远程URL/OData/Web API、
```
SfDataManager
```
  、按需加载
阅读： references/custom-binding.md
- ```
DataAdaptor
```
  重写、
```
Read
```
  /
```
ReadAsync
```
  、插入/更新/删除、分页与排序支持、仅支持自引用数据
阅读： references/graphql.md
- Hot Chocolate服务器、
```
GraphQLAdaptor
```
  、
```
GraphQLAdaptorOptions
```
  、
```
DataManagerRequestInput
```
  、CRUD突变、级联删除、CORS

Columns & Cells

列与单元格

Read: references/columns.md
- ```
ColumnType
```
  ,
```
Format
```
  ,
```
TextAlign
```
  , frozen, reorder, resize, chooser, stacked headers, column menu, foreign key

Read: references/cell.md

QueryCellInfo

CustomAttributes

ClipMode

GridLines

, tooltips

阅读： references/columns.md
- ```
ColumnType
```
  、
```
Format
```
  、
```
TextAlign
```
  、冻结、重排、调整大小、列选择器、堆叠表头、列菜单、外键
阅读： references/cell.md
- ```
QueryCellInfo
```
  、
```
CustomAttributes
```
  、
```
ClipMode
```
  、
```
GridLines
```
  、工具提示

Sorting, Filtering & Searching

排序、筛选与搜索

Read: references/sorting.md
- ```
AllowSorting
```
  , multi-sort,
```
SortComparer
```
  ,
```
SortColumnAsync
```
  ,
```
ClearSortingAsync
```
  , hierarchy preserved
Read: references/filtering.md
- ```
AllowFiltering
```
  ,
```
FilterType
```
  (FilterBar/Menu/Excel/CheckBox), hierarchy modes, operators,
```
FilterByColumnAsync
```
  . ⚠️ See filtering.md for
```
FilterTemplate
```
  rules
Read: references/searching.md
- Toolbar Search,
```
SearchAsync
```
  ,
```
GridSearchSettings
```
  , hierarchy modes, highlight/clear

阅读： references/sorting.md
- ```
AllowSorting
```
  、多列排序、
```
SortComparer
```
  、
```
SortColumnAsync
```
  、
```
ClearSortingAsync
```
  、层级保留
阅读： references/filtering.md
- ```
AllowFiltering
```
  、
```
FilterType
```
  （FilterBar/菜单/Excel/复选框）、层级模式、操作符、
```
FilterByColumnAsync
```
  。⚠️ 请参阅filtering.md了解
```
FilterTemplate
```
  规则
阅读： references/searching.md
- 工具栏搜索、
```
SearchAsync
```
  、
```
GridSearchSettings
```
  、层级模式、高亮/清除

Editing

编辑

Read: references/editing.md
- Edit modes (Cell/Row/Dialog/Batch), edit types, command column, validation, template editing, EF Core. ⚠️ See editing.md for
```
ValidationRules
```
  . Always add
```
@using Syncfusion.Blazor.Grids
```
  when using
```
<TreeGridEvents>
```

阅读： references/editing.md
- 编辑模式（单元格/行/对话框/批量）、编辑类型、命令列、验证、模板编辑、EF Core。⚠️ 请参阅editing.md了解
```
ValidationRules
```
  。使用
```
<TreeGridEvents>
```
  时始终添加
```
@using Syncfusion.Blazor.Grids
```

Rows & Selection

行与选择

Read: references/rows.md
- ```
RowDataBound
```
  , row/detail template, drag-and-drop, row height, row spanning
Read: references/selection.md
- Row/cell/both modes, checkbox column, toggle, drag select, programmatic selection, touch

阅读： references/rows.md
- ```
RowDataBound
```
  、行详情模板、拖放、行高、行合并
阅读： references/selection.md
- 行/单元格/两者模式、复选框列、切换、拖动选择、程序化选择、触摸支持

Paging & Virtualization

分页与虚拟化

Read: references/paging.md
- ```
AllowPaging
```
  ,
```
TreeGridPageSettings
```
  ,
```
PageSize
```
  , pager position/template, programmatic navigation
Read: references/virtualization.md
- ```
EnableVirtualization
```
  ,
```
EnableColumnVirtualization
```
  , vs. paging, limitations

阅读： references/paging.md
- ```
AllowPaging
```
  、
```
TreeGridPageSettings
```
  、
```
PageSize
```
  、分页器位置/模板、程序化导航
阅读： references/virtualization.md
- ```
EnableVirtualization
```
  、
```
EnableColumnVirtualization
```
  、与分页的对比、限制

Toolbar, Menus & Templates

工具栏、菜单与模板

Read: references/toolbar.md
- Built-in & custom items,
```
EnableToolbarItemsAsync
```
  ,
```
OnToolbarClick
```
Read: references/context-menu.md
- ```
ContextMenuItems
```
  , custom items,
```
ContextMenuItemClicked
```
  , conditional show/hide
Read: references/templates.md
- Column/header/row/detail/toolbar templates, loading indicator

阅读： references/toolbar.md
- 内置与自定义项、
```
EnableToolbarItemsAsync
```
  、
```
OnToolbarClick
```
阅读： references/context-menu.md
- ```
ContextMenuItems
```
  、自定义项、
```
ContextMenuItemClicked
```
  、条件显示/隐藏
阅读： references/templates.md
- 列/表头/行/详情/工具栏模板、加载指示器

Exporting & Scrolling

导出与滚动

Read: references/exporting.md
- ```
ExportToExcelAsync
```
  ,
```
ExportToPdfAsync
```
  ,
```
PrintAsync
```
  , custom data/headers, themes

Read: references/scrolling.md

Frozen rows/columns (

FrozenRows

IsFrozen

FreezeDirection

AllowFreezeLineMoving

EnableStickyHeader

ScrollIntoViewAsync

阅读： references/exporting.md
- ```
ExportToExcelAsync
```
  、
```
ExportToPdfAsync
```
  、
```
PrintAsync
```
  、自定义数据/表头、主题

阅读： references/scrolling.md

冻结行/列（

FrozenRows

、

IsFrozen

、

FreezeDirection

）、

AllowFreezeLineMoving

、

EnableStickyHeader

、

ScrollIntoViewAsync

Advanced Features

高级功能

Read: references/aggregates.md
- ```
TreeGridAggregateColumn
```
  (
```
Field
```
  +
```
Type
```
  required),
```
AggregateType
```
  ,
```
FooterTemplate
```
  ,
```
ShowChildSummary
```
  , custom LINQ, page-scope limitation
Read: references/clipboard.md
- Copy (Ctrl+C/Ctrl+Shift+H),
```
CopyAsync
```
  , paste (Box+Batch),
```
CopyHierarchyMode
```
  ,
```
BeforeCopyPaste
```
Read: references/autofill.md
- ```
EnableAutoFill
```
  + Cell/Box selection + Batch edit, limitations
Read: references/adaptive-layout.md
- ```
EnableAdaptiveUI
```
  , full-screen dialogs, vertical row mode
Read: references/state-management.md
- ```
EnablePersistence
```
  , persisted properties, manual state methods

阅读： references/aggregates.md
- ```
TreeGridAggregateColumn
```
  （必须包含
```
Field
```
  +
```
Type
```
  ）、
```
AggregateType
```
  、
```
FooterTemplate
```
  、
```
ShowChildSummary
```
  、自定义LINQ、页面范围限制
阅读： references/clipboard.md
- 复制（Ctrl+C/Ctrl+Shift+H）、
```
CopyAsync
```
  、粘贴（Box+批量）、
```
CopyHierarchyMode
```
  、
```
BeforeCopyPaste
```
阅读： references/autofill.md
- ```
EnableAutoFill
```
  + 单元格/Box选择 + 批量编辑、限制
阅读： references/adaptive-layout.md
- ```
EnableAdaptiveUI
```
  、全屏对话框、垂直行模式
阅读： references/state-management.md
- ```
EnablePersistence
```
  、持久化属性、手动状态方法

Events

事件

Read: references/events.md

TreeGridEvents<TValue>

OnActionBegin

OnActionComplete

RowDataBound

QueryCellInfo

, cancel actions

阅读： references/events.md

TreeGridEvents<TValue>

、

OnActionBegin

OnActionComplete

、

RowDataBound

、

QueryCellInfo

、取消操作

Quick Start Example

快速开始示例

1. Install NuGet:

Syncfusion.Blazor.TreeGrid

2. Register in
_Imports.razor
:

razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.TreeGrid

3. Add CSS in
wwwroot/index.html
or
App.razor
:

html

<link href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />

4. Add to
Program.cs
:

csharp

builder.Services.AddSyncfusionBlazor();

5. Minimal component:

razor

@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" },
    };
}

1. 安装NuGet包：

Syncfusion.Blazor.TreeGrid

2. 在
_Imports.razor
中注册：

razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.TreeGrid

3. 在
wwwroot/index.html
或
App.razor
中添加CSS：

html

<link href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />

4. 在
Program.cs
中添加服务：

csharp

builder.Services.AddSyncfusionBlazor();

5. 最小化组件示例：

razor

@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="名称" Width="200" />
        <TreeGridColumn Field="Status" HeaderText="状态" 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 = "Alpha项目", Status = "进行中" },
        new TaskItem { Id = 2, ParentId = 1,    Name = "设计阶段",  Status = "已完成" },
        new TaskItem { Id = 3, ParentId = 1,    Name = "开发阶段",   Status = "进行中" },
        new TaskItem { Id = 4, ParentId = 3,    Name = "后端API",   Status = "待开始" },
    };
}

Common Patterns

常见模式

Full-Featured TreeGrid (Sorting + Filtering + Paging + Editing)

全功能TreeGrid（排序 + 筛选 + 分页 + 编辑）

razor

<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
}

razor

<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="任务" Width="220" />
        <TreeGridColumn Field="Duration" HeaderText="天数" Width="100" />
        <TreeGridColumn Field="Progress" HeaderText="%" Width="100" />
    </TreeGridColumns>
</SfTreeGrid>

@code {
    private SfTreeGrid<TaskItem> TreeGridRef;
    // ... 数据与模型
}

Excel & PDF Export

Excel与PDF导出

razor

<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();
    }
}

razor

<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();
    }
}