Guide for implementing Syncfusion WinUI TreeGrid (SfTreeGrid) components for displaying hierarchical or self-relational data. Use this skill when working with tree-structured grids, parent-child data relationships, or expandable grid rows. Covers TreeGrid features for organizational charts, file system displays, and multi-level data representation in WinUI applications.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Guide for implementing Syncfusion WinUI TreeGrid (SfTreeGrid) components for displaying hierarchical or self-relational data. Use this skill when working with tree-structured grids, parent-child data relationships, or expandable grid rows. Covers TreeGrid features for organizational charts, file system displays, and multi-level data representation in WinUI applications.
metadata
{"author":"Syncfusion Inc","version":"34.1.29"}
Implementing Syncfusion WinUI TreeGrid
When to Use This Skill
Use this skill when you need to:
Display hierarchical or self-relational data in a tree-structured grid
Create data grids with parent-child relationships
Implement expandable/collapsible rows with nested data
Build organizational charts or employee hierarchies in grid format
Display file system structures with grid features
Work with category hierarchies, bill of materials, or nested classifications
Need advanced grid features (sorting, filtering, editing) on tree-structured data
Visualize multi-level data with column-based representation
Component Overview
The Syncfusionยฎ WinUI TreeGrid (SfTreeGrid) is a data-oriented control that displays self-relational or hierarchical data in a tree structure with grid capabilities. It combines the tree view's expandable/collapsible navigation with the data grid's rich feature set.
Use when data objects reference each other via ID/ParentID:
// Each employee has an ID and ReportsTo (parent ID)
ParentPropertyName = "ID"
ChildPropertyName = "ReportsTo"
SelfRelationRootValue = -1// Root nodes have ReportsTo = -1
Nested Collection Structure
Use when data objects contain child collections:
// Each person has a Children property containing child objects
ChildPropertyName = "Children"// No ParentPropertyName needed
Column Auto-Generation Control
<!-- Auto-generate columns from data properties -->
<treeGrid:SfTreeGrid AutoGenerateColumns="True" />
<!-- Define columns manually for full control -->
<treeGrid:SfTreeGrid AutoGenerateColumns="False">
<treeGrid:SfTreeGrid.Columns>
<treeGrid:TreeGridTextColumn MappingName="FirstName" HeaderText="First Name"/>
<treeGrid:TreeGridNumericColumn MappingName="Salary" DisplayNumberFormat="C2"/>
</treeGrid:SfTreeGrid.Columns>
</treeGrid:SfTreeGrid>
MVVM Data Binding
publicclassViewModel : INotifyPropertyChanged
{
private ObservableCollection<DataModel> _items;
public ObservableCollection<DataModel> Items
{
get => _items;
set
{
_items = value;
OnPropertyChanged();
}
}
publicevent PropertyChangedEventHandler PropertyChanged;
protectedvoidOnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}
Expand/Collapse Control
// Auto-expand modes
AutoExpandMode = AutoExpandMode.AllNodesExpanded; // All expanded
AutoExpandMode = AutoExpandMode.RootNodesExpanded; // Only root
AutoExpandMode = AutoExpandMode.None; // All collapsed// Programmatic control
treeGrid.ExpandNode(node);
treeGrid.CollapseNode(node);
treeGrid.ExpandAllNodes();
treeGrid.CollapseAllNodes();
Key Properties
Data Binding Properties
ItemsSource - Data source (IEnumerable)
When: Always required for data binding
Why: Provides the data to display
ChildPropertyName - Property containing child collection or parent reference
