Skip to main content Home Creators syncfusion wpf-ui-components-skills syncfusion-wpf-treegrid
syncfusion-wpf-treegrid Comprehensive guide for implementing Syncfusion WPF TreeGrid (SfTreeGrid) control in Windows Presentation Foundation applications. Use this when displaying hierarchical or self-relational data in a grid format with expandable tree structure. Supports column configuration, sorting and filtering hierarchical data, editing tree nodes, cell merging, exporting, and conditional styling.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
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.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-treegridThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Related occupations SOC
Based on SOC occupation classification
name syncfusion-wpf-treegrid description Comprehensive guide for implementing Syncfusion WPF TreeGrid (SfTreeGrid) control in Windows Presentation Foundation applications. Use this when displaying hierarchical or self-relational data in a grid format with expandable tree structure. Supports column configuration, sorting and filtering hierarchical data, editing tree nodes, cell merging, exporting, and conditional styling. metadata {"author":"Syncfusion Inc","version":"1.0.0"} version 34.1.29
Implementing WPF TreeGrid (SfTreeGrid)
Comprehensive guide for implementing the Syncfusion® WPF TreeGrid control - a data-oriented control that displays self-relational and hierarchical data in a tree structure with columns. This skill provides complete guidance for setup, data binding, column configuration, interactive features, data operations, styling, and advanced capabilities.
When to Use This Skill
Use this skill when you need to:
Display hierarchical data in a grid with expandable/collapsible tree structureBind self-relational data (parent-child relationships within single collection)Bind nested collections with parent-child object hierarchiesImplement load-on-demand for large hierarchical datasetsConfigure columns with various types (text, numeric, datetime, checkbox, combo box)Enable editing in tree grid with validation
Implement sorting and filtering on hierarchical data
Customize selection behavior (single, multiple, row, cell)
Apply conditional styling based on data or node level
Merge cells across columns in tree grid rows
Export tree grids to Excel or PDF formats
Implement MVVM patterns with TreeGrid controls
Customize appearance with themes, styles, and templatesThis skill is essential for any WPF application that needs to present hierarchical or parent-child data in an interactive, feature-rich grid interface.
Component Overview The SfTreeGrid control provides:
Hierarchical Data Display: Self-relational and nested collection bindingMultiple Column Types: Text, Numeric, DateTime, CheckBox, ComboBox, Hyperlink, and Template columnsInteractive Features: Editing, selection, sorting, filtering, drag-dropData Operations: Sorting, filtering with multiple filter levels (Root, All, Extended)Load-On-Demand: Efficient loading of child nodes on expansionCell Merging: Merge adjacent cells across columnsExport Capabilities: Export to Excel and PDF with customizationStyling: Conditional styling, themes, templates, and visual customizationMVVM Support: Complete MVVM pattern compatibility with command bindingPerformance: Virtualization and optimized rendering for large datasets
Documentation and Navigation Guide
Getting Started Start here for initial setup and basic implementation:
Assembly deployment (Syncfusion.SfGrid.WPF, Syncfusion.Data.WPF, Syncfusion.Shared.WPF)
Creating WPF project with TreeGrid
Adding control via Designer, XAML, or code-behind
Basic TreeGrid setup examples
Simple self-relational and nested collection binding
Data Binding & Operations
Self-relational data binding (ParentPropertyName, ChildPropertyName)
Nested collection binding (ChildPropertyName)
IEnumerable collection support
Dynamic data object binding
INotifyCollectionChanged and ObservableCollection
Data refresh and updates
RequestTreeItems event for on-demand loading
LoadOnDemandCommand for MVVM scenarios
Lazy loading child nodes on expansion
Performance optimization for large datasets
Populating nodes indicator display
Column Configuration
Adding and removing columns
AutoGenerateColumns vs manual configuration
Column properties (HeaderText, MappingName, Width, Alignment)
Column visibility and frozen columns
Column reordering and resizing
Text wrapping and trimming
TreeGridTextColumn for string data
TreeGridNumericColumn with number formatting
TreeGridDateTimeColumn with date patterns
TreeGridCheckBoxColumn for boolean values
TreeGridComboBoxColumn for dropdown selection
TreeGridHyperlinkColumn for clickable links
TreeGridTemplateColumn for custom content
Creating custom column types
ColumnSizer property (Auto, Star, SizeToCells, SizeToHeader)
Auto-fitting columns to content
Manual width specification
User resizing behavior
Min and Max width constraints
Fill remaining space strategies
Interactive Features
AllowEditing property for grid and column level
Edit modes (OnTap, OnDoubleTap)
Edit triggers and edit template customization
BeginEdit and EndEdit events
Programmatic editing (BeginEdit, EndEdit, CurrentCell)
Validation during editing
IDataErrorInfo validation interface
INotifyDataErrorInfo support
Cell-level and row-level validation
Custom validation rules
Validation error display customization
Handling validation errors
SelectionMode (Single, Multiple, Extended, None)
SelectionUnit (Row, Cell, Any)
SelectedItem and SelectedItems binding
CurrentCell and CurrentItem properties
Programmatic selection
SelectionChanged and CurrentCellActivated events
QueryCoveredRange event for merging cells
Column-wise merging by fixed range
Merging based on cell content
Navigation and selection in merged cells
Performance considerations for cell merging
Data Operations
AllowSorting property (grid and column level)
Single and multi-column sorting
Tri-state sorting (ascending, descending, unsorted)
Programmatic sorting with SortColumnDescriptions
Custom sorting logic with IComparer
SortColumnsChanging and SortColumnsChanged events
FilterLevel (Root, All, Extended) for hierarchical filtering
Advanced filter UI with filter row
Programmatic filtering with FilterPredicates
Custom filter logic
FilterChanging and FilterChanged events
Clearing and persisting filters
Styling & Customization
StyleSelector for row and cell styling
RowStyleSelector for row-based formatting
CellStyleSelector for cell-based formatting
Conditional formatting based on data values
Node level-based styling (parent vs child)
Alternating row styles
CellTemplate and EditTemplate customization
HeaderTemplate for column headers
ExpanderTemplate for expand/collapse buttons
RowHeaderTemplate customization
Cell and row styling
Visual states and triggers
Theme integration
Advanced Features
Export to Excel (ExportToExcel method)
Export to PDF (ExportToPdf method)
TreeGridExcelExportingOptions customization
TreeGridPdfExportingOptions customization
Print functionality (PrintSettings)
Exporting specific nodes and columns
MVVM pattern implementation with ICommand
GridLinesVisibility customization (Both, Horizontal, Vertical, None)
Serialization and Deserialization (Save/LoadSettings)
Localization (ResourceManager)
UI Automation support for accessibility
Theming (MaterialLight, MaterialDark, Office2019, etc.)
Helper methods and utilities
NodeCheckBox for node selection
ToolTip customization
Quick Start Example
Basic Self-Relational TreeGrid <Window x:Class ="TreeGridSample.MainWindow"
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion ="http://schemas.syncfusion.com/wpf" >
<syncfusion:SfTreeGrid Name ="treeGrid"
AutoGenerateColumns ="True"
ChildPropertyName ="Children"
ItemsSource ="{Binding Employees}"
AllowSorting ="True"
AllowFiltering ="True"
AllowEditing ="True" >
</syncfusion:SfTreeGrid >
</Window >
using Syncfusion.UI.Xaml.TreeGrid;
using System.Collections.ObjectModel;
namespace TreeGridSample
{
public class Employee
{
public int EmployeeID { get ; set ; }
public string FirstName { get ; set ; }
public string LastName { get ; set ; }
public string Title { get ; set ; }
public int ReportsTo { get ; set ; }
public ObservableCollection<Employee> Children { get ; set ; }
public Employee ()new ObservableCollection<Employee>();
}
}
public class EmployeeViewModel
{
public ObservableCollection<Employee> Employees { get ; set ; }
public EmployeeViewModel ()new ObservableCollection<Employee>();
PopulateData();
}
private void PopulateData ()var ceo = new Employee
{
EmployeeID = 1 ,
FirstName = "Robert" ,
LastName = "King" ,
Title = "CEO"
};
ceo.Children.Add(new Employee
{
EmployeeID = 2 ,
FirstName = "David" ,
LastName = "Smith" ,
Title = "VP of Sales" ,
ReportsTo = 1
});
ceo.Children.Add(new Employee
{
EmployeeID = 3 ,
FirstName = "Nancy" ,
LastName = "Davolio" ,
Title = "VP of Marketing" ,
ReportsTo = 1
});
Employees.Add(ceo);
}
}
}
Common Patterns
Pattern 1: Self-Relational Data Binding For data where parent-child relationship exists within the same collection:
public class Task
{
public int TaskID { get ; set ; }
public string TaskName { get ; set ; }
public int ? ParentID { get ; set ; }
}
public ObservableCollection<Task> Tasks { get ; set ; }
<syncfusion:SfTreeGrid Name ="treeGrid"
ItemsSource ="{Binding Tasks}"
ParentPropertyName ="ParentID"
SelfRelationRootValue ="-1"
ChildPropertyName ="TaskID" >
</syncfusion:SfTreeGrid >
Pattern 2: Nested Collection Binding For data with explicit child collections:
public class Folder
{
public string FolderName { get ; set ; }
public ObservableCollection<Folder> SubFolders { get ; set ; }
}
<syncfusion:SfTreeGrid Name ="treeGrid"
ItemsSource ="{Binding Folders}"
ChildPropertyName ="SubFolders" >
</syncfusion:SfTreeGrid >
Pattern 3: Load-On-Demand with RequestTreeItems For large datasets where child nodes load when parent expands:
treeGrid.RequestTreeItems += TreeGrid_RequestTreeItems;
private void TreeGrid_RequestTreeItems (object sender, TreeGridRequestTreeItemsEventArgs eif (e.ParentItem == null )
{
e.ChildItems = GetRootNodes();
}
else
{
var parent = e.ParentItem as BusinessObject;
e.ChildItems = GetChildNodes(parent.ID);
}
}
Pattern 4: Custom Column Definition <syncfusion:SfTreeGrid ItemsSource ="{Binding Employees}"
AutoGenerateColumns ="False" >
<syncfusion:SfTreeGrid.Columns >
<syncfusion:TreeGridTextColumn HeaderText ="Name"
MappingName ="FirstName"
Width ="150" />
<syncfusion:TreeGridNumericColumn HeaderText ="Age"
MappingName ="Age"
NumberDecimalDigits ="0" />
<syncfusion:TreeGridDateTimeColumn HeaderText ="DOB"
MappingName ="DateOfBirth"
Pattern ="ShortDate" />
<syncfusion:TreeGridCheckBoxColumn HeaderText ="Active"
MappingName ="IsActive" />
</syncfusion:SfTreeGrid.Columns >
</syncfusion:SfTreeGrid >
Pattern 5: MVVM Command Binding <syncfusion:SfTreeGrid ItemsSource ="{Binding Employees}"
ChildPropertyName ="Children" >
<syncfusion:SfTreeGrid.RecordContextMenu >
<ContextMenu >
<MenuItem Header ="Add Child"
Command ="{Binding AddChildCommand}"
CommandParameter ="{Binding}" />
<MenuItem Header ="Delete"
Command ="{Binding DeleteCommand}"
CommandParameter ="{Binding}" />
</ContextMenu >
</syncfusion:SfTreeGrid.RecordContextMenu >
</syncfusion:SfTreeGrid >
public class EmployeeViewModel : INotifyPropertyChanged
{
public ICommand AddChildCommand { get ; set ; }
public ICommand DeleteCommand { get ; set ; }
public EmployeeViewModel ()new RelayCommand(AddChild);
DeleteCommand = new RelayCommand(Delete);
}
private void AddChild (object parametervar parent = parameter as Employee;
if (parent != null )
{
parent.Children.Add(new Employee { });
}
}
}
Key Properties
Essential Properties Property Type Description ItemsSource IEnumerable Data source for the TreeGrid ChildPropertyName string Property name for child collection ParentPropertyName string Property name for parent ID (self-relational) SelfRelationRootValue object Value indicating root level nodes AutoGenerateColumns bool Auto-generate columns from data source Columns TreeGridColumns Collection of column definitions
Behavior Properties Property Type Description AllowEditing bool Enable/disable cell editing AllowSorting bool Enable/disable sorting AllowFiltering bool Enable/disable filtering FilterLevel FilterLevel Filtering scope (Root, All, Extended) SelectionMode GridSelectionMode Selection mode (Single, Multiple, Extended) SelectionUnit GridSelectionUnit Selection unit (Row, Cell, Any) AutoExpandMode AutoExpandMode Auto-expand behavior (RootNodesExpanded, AllNodesExpanded) ExpanderPosition ExpanderPosition Position of expand/collapse icon (Start, End)
Display Properties Property Type Description GridLinesVisibility GridLinesVisibility Grid lines display (Both, Horizontal, Vertical, None) ColumnSizer GridLengthUnitType Column auto-sizing strategy RowHeight double Height of each row HeaderRowHeight double Height of header row IndentColumnWidth double Width of indent for each level
Common Use Cases
1. Employee Hierarchy Management Display organizational structure with employees, managers, and departments in expandable tree format.
2. File System Browser Show folders and files in hierarchical structure with load-on-demand for large directory trees.
3. Project Task Management Display projects, sub-projects, tasks, and subtasks with status tracking, editing, and conditional styling.
4. Bill of Materials (BOM) Show product assemblies with components, sub-components, quantities, and costs in hierarchical view.
5. Category-Product Catalog Display product categories, subcategories, and products with filtering, sorting, and export capabilities.
6. Account Hierarchy Financial account trees with parent-child relationships, balance calculations, and drill-down capabilities.
7. Multi-Level Approval Workflows Track approval hierarchies with status indicators, conditional styling, and interactive editing.
8. Geographic Data Organization Display countries, states, cities in hierarchical format with data visualization and export features.
Performance Considerations
Use Load-On-Demand for datasets with more than 1,000 total nodesEnable Virtualization (enabled by default) for smooth scrollingAvoid complex templates in frequently updated cellsUse ItemsSourceChanged event instead of frequent rebindingBatch updates when modifying multiple nodesDisable live updates (LiveNodeUpdateMode) when not neededOptimize FilterLevel choice based on data structure
Related Skills
Support Resources
Next Steps: Navigate to the specific reference file above based on your implementation needs. Start with getting-started.md for initial setup, then explore data binding, column configuration, and advanced features as needed.
