Skip to main content Início Criadores syncfusion blazor-ui-components-skills syncfusion-blazor-treeview
syncfusion-blazor-treeview Implement Syncfusion Blazor TreeView component for hierarchical data display with single/multi-selection, editing, expand-collapse, checkboxes, drag-drop, and virtualization. Use this skill whenever the user needs to display tree-structured data, enable node selection and editing, implement checkboxes for multi-selection, load data on demand, filter and search nodes, customize node appearance, or handle tree interaction events.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-treeviewO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... syncfusion-blazor-diagram Build and troubleshoot Syncfusion Blazor diagrams using SfDiagramComponent. Trigger for flowcharts, org charts, mind maps, BPMN, UML sequence, swimlanes, symbol palettes, nodes/connectors/ports/annotations, layouts, data binding, serialization (load/save), export/print, and collaborative editing questions. Provide Blazor + Syncfusion setup steps, configuration patterns, and sample snippets.
syncfusion-blazor-pivot-table Use this skill when users ask how to implement Syncfusion Pivot Table/PivotView in Blazor. Trigger for Blazor components, data binding, OLAP analysis, aggregation, drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), or pivot charts. Blazor-only, not React/Angular/Vue/JS.
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Explorador de arquivos
12 arquivos name syncfusion-blazor-treeview description Implement Syncfusion Blazor TreeView component for hierarchical data display with single/multi-selection, editing, expand-collapse, checkboxes, drag-drop, and virtualization. Use this skill whenever the user needs to display tree-structured data, enable node selection and editing, implement checkboxes for multi-selection, load data on demand, filter and search nodes, customize node appearance, or handle tree interaction events.
metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Navigation Components"}
Implementing Syncfusion Blazor TreeView Component
The Blazor TreeView component displays hierarchical data in an expandable/collapsible tree structure. It supports local and remote data binding, single and multi-selection, editing, checkboxes, drag-drop reordering, virtualization for large datasets, filtering, and comprehensive event handling.
📋 Table of Contents
When to Use Installation & Setup Quick Start Key Properties Key Methods Key Events Common Patterns Complete Reference Navigation
When to Use This Skill
Use the TreeView component when you need to:
Display hierarchical data in a tree structure with expandable/collapsible nodesSingle selection : Allow users to select one node from the treeMulti-selection : Enable selection of multiple tree nodes using Ctrl+Click and Shift+Click
Checkbox selection : Provide checkbox-based multi-selection with automatic parent-child state management
Edit nodes : Allow inline renaming or editing of node text
Drag and drop : Enable reordering nodes within the hierarchy
Filter and search : Implement search functionality to find nodes
Remote data sources : Bind to Web APIs, OData services, or custom endpoints
Handle events : Respond to expand, collapse, select, edit, and drag-drop actions
Virtualization : Display large datasets (1000+ nodes) with smooth scrolling
Custom styling : Apply icons, colors, and templates for nodes
Installation & Setup Install Syncfusion NuGet packages and configure your Blazor project:
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations
builder.Services.AddSyncfusionBlazor();
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
Quick Start @using Syncfusion.Blazor.Navigations
<SfTreeView TValue="MailItem" >
<TreeViewFieldsSettings TValue="MailItem"
Id="Id"
Text="FolderName"
Child="Children"
DataSource="@MyFolder" >
</TreeViewFieldsSettings>
<TreeViewEvents TValue="MailItem" NodeSelected="OnNodeSelected" ></TreeViewEvents>
</SfTreeView>
@code {
public class MailItem
{
public string ? Id { get ; set ; }
public string ? FolderName { get ; set ; }
public List<MailItem>? Children { get ; set ; }
}
void OnNodeSelected (NodeSelectEventArgs args )$"Selected: {args .NodeData.Text} " );
}
List<MailItem> MyFolder = new ()
{
new MailItem { Id = "1" , FolderName = "Inbox" , Children = new () },
new MailItem { Id = "2" , FolderName = "Sent" , Children = new () }
};
}
Key Properties Property Type Default Purpose AllowDragAndDropbool false Enable/disable drag-drop hierarchy reordering AllowEditingbool false Allow double-click node renaming AllowMultiSelectionbool false Enable Ctrl+Click multi-selection ShowCheckBoxbool false Display checkboxes for each node AutoCheckbool true Auto-check/uncheck children when parent checked EnablePersistencebool false Persist expanded/selected/checked state to localStorage EnableVirtualizationbool false Virtual scrolling for 1000+ nodes (requires Height) ExpandedNodesstring[] Empty Initially expanded node IDs (2-way bindable) SelectedNodesstring[] Empty Selected node IDs (2-way bindable) CheckedNodesstring[] Empty Checked node IDs (2-way bindable) LoadOnDemandbool true Load children only when node expands ExpandOnExpandAction Click Trigger expand on Click/DoubleClick/None Heightstring "auto" Fixed height (required for virtualization)
Key Methods Method Purpose ExpandAllAsync()Expand all nodes ExpandAllAsync(string[] nodeIds)Expand specific nodes by ID CollapseAllAsync()Collapse all nodes CollapseAllAsync(string[] nodeIds)Collapse specific nodes BeginEditAsync(string nodeId)Enter edit mode for a node GetTreeData()Get all tree data GetTreeData(string nodeId)Get specific node data by ID EnsureVisibleAsync(string nodeId)Scroll to make node visible CheckAllAsync()Check all checkboxes UncheckAllAsync()Uncheck all checkboxes ClearStateAsync()Clear all state (selection, expand, check)
Key Events Event Fires When Common Uses CreatedTreeView initialized Post-initialization setup, load preferences DataBoundData binding complete Auto-expand default nodes, validate data NodeSelectedNode left-clicked Load node details, enable actions NodeClickedNode clicked Distinguish single vs double-click NodeExpandedNode expanded Load child nodes (load-on-demand) NodeCollapsedNode collapsed Optional: Unload children from memory NodeEditingBefore edit mode Validate permissions, prevent edits NodeEditedEdit confirmed Validate new text, save to server OnNodeDragStartDrag begins Prevent dragging restricted nodes NodeDroppedDrop completed Update hierarchy in server NodeCheckingBefore checkbox changes Prevent checking restricted nodes NodeCheckedCheckbox changed Update related data, trigger actions DataSourceChangedData source updated Re-apply filters, refresh calculations OnActionFailureAction fails (API error) Recover from errors, show notifications OnKeyPressKey pressed Implement keyboard shortcuts (Delete, F2, etc)
Common Patterns
Pattern 1: Basic Selection <SfTreeView TValue="Item" @bind-SelectedNodes="@SelectedIds" >
<TreeViewFieldsSettings TValue="Item" DataSource="@Items" />
<TreeViewEvents TValue="Item" NodeSelected="OnSelect" ></TreeViewEvents>
</SfTreeView>
@code {
string [] SelectedIds = Array.Empty<string >();
void OnSelect (NodeSelectEventArgs args )args .NodeData.Text);
}
Pattern 2: Multiple Selection <SfTreeView TValue="Item" AllowMultiSelection="true" @bind-SelectedNodes="@SelectedIds" >
<TreeViewFieldsSettings TValue="Item" DataSource="@Items" />
</SfTreeView>
Pattern 3: Load on Demand void OnNodeExpanded (NodeExpandEventArgs args )if (args .NodeData.HasChild && args .NodeData.Child == null )
{
args .NodeData.Child = await FetchChildren(args .NodeData.Id);
}
}
Pattern 4: Drag and Drop <SfTreeView TValue="Item" AllowDragAndDrop="true" >
<TreeViewFieldsSettings TValue="Item" DataSource="@Items" />
<TreeViewEvents TValue="Item" NodeDropped="OnDropped" ></TreeViewEvents>
</SfTreeView>
void OnDropped (DragAndDropEventArgs args )args );
Pattern 5: Node Editing <SfTreeView TValue="Item" AllowEditing="true" DoubleClickAction="DoubleClickAction.Edit" >
<TreeViewFieldsSettings TValue="Item" DataSource="@Items" />
<TreeViewEvents TValue="Item" NodeEdited="OnEdited" ></TreeViewEvents>
</SfTreeView>
void OnEdited (NodeEditEventArgs args )args .NodeData);
Pattern 6: Checkboxes <SfTreeView TValue="Item" AllowCheckBoxes="true" ChildChecking="ChildCheckState.Both" >
<TreeViewFieldsSettings TValue="Item" DataSource="@Items" />
</SfTreeView>
var checked = treeRef.GetAllCheckedNodes();
Documentation and Navigation Guide
Getting Started
Installation and NuGet package setup
Project configuration by type (WebAssembly, Server, Web App, MAUI)
CSS theme configuration
Service registration and first TreeView component
Data Binding and Sources
Local data binding (hierarchical and self-referential structures)
Remote data with OData, OData V4, and Web API adaptors
Load on Demand for large datasets
TreeViewFieldsSettings property mappings
DataBound event for post-binding operations
Node Selection
Single node selection (default behavior)
Multi-selection with AllowMultiSelection property
Accessing selected node data via NodeSelected event
Programmatic selection using SelectedNodes binding
Selection validation and conditional selection
Expand and Collapse Actions
Expand/collapse methods (ExpandAllAsync, CollapseAllAsync)
ExpandedNodes two-way binding for programmatic control
Initial expand state via data source
Expand/collapse animations with TreeViewNodeAnimationSettings
Load-on-demand child node loading via NodeExpanded event
Node Editing
Enable editing with AllowEditing property
Double-click to enter edit mode
BeginEditAsync method for programmatic edit entry
NodeEditing and NodeEdited events for validation
Rename operations with conflict detection
Checkbox Features
ShowCheckBox property for multi-item selection
AutoCheck for automatic parent-child synchronization
CheckedNodes two-way binding for programmatic control
Getting checked nodes with filtering and iteration
Permissions and role-based checkbox patterns
Events and Callbacks
Lifecycle events (Created, DataBound)
Selection events (NodeSelected, SelectedNodesChanged)
Expand/collapse events (NodeExpanded, NodeCollapsed)
Edit events (NodeEditing, NodeEdited)
Checkbox events (NodeChecking, NodeChecked)
Drag-drop events (OnNodeDragStart, NodeDropped)
Keyboard shortcuts (Enter, Delete, F2, Arrow keys)
Advanced Features
Drag-and-drop with hierarchy reordering
UI virtualization for 1000+ nodes
Search and filtering functionality
Sorting (Ascending, Descending, None)
Performance optimization techniques
Customization and Styling
Icon customization (expand/collapse, node icons)
Dynamic icons based on data
Text wrapping and display formatting
CSS styling with e-icons classes
Theme support and responsive design
Authorization and Security
Authentication setup with AuthorizeView
Role-based authorization and permissions
Node-level access control
Claims-based authorization patterns
Securing edit operations and drag-drop
Navigation Patterns
Node traversal methods (parent, children, siblings)
Breadcrumb navigation implementation
NavigateUrl property for node links
Parent-child navigation relationships
Deep-linking to specific nodes
Quick Links and Real-World Examples Real-world implementations:
File Browser : Use hierarchical data + expand-collapse + icons + drag-dropOrganization Chart : Use data-binding + templates + multi-level navigationNavigation Menu : Use hierarchical data + keyboard navigation + load-on-demandCategory Filter : Use self-referential data + checkboxes + filteringPermissions UI : Use checkboxes + AutoCheck + role-based authorization
Summary This skill provides comprehensive guidance for implementing the Syncfusion Blazor TreeView component. Use the Documentation and Navigation Guide section above to find the specific reference file you need based on your use case.
