Syncfusion.Maui.TreeGrid

Syncfusion .NET MAUI TreeGrid (SfTreeGrid)

The Syncfusion .NET MAUI TreeGrid displays and manages hierarchical data in a tree structure with expandable and collapsible nodes. It is built for high performance when working with large data sets and supports Android, iOS, Mac Catalyst, and Windows from a single codebase.

Documentation · Getting Started · Demos on GitHub · Product Page · Release Notes

---

Using this package with an AI coding agent

Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:

Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project’s platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.

Platform reference: https://ai.syncfusion.com/maui/llms.txt

Key features

Hierarchical data

• Display parent and child records in an expandable tree view.
• Bind to nested collections or use self-relational data.
• Control hierarchy with ChildPropertyName and ParentPropertyName.

Grid operations

• Auto-generate columns or define them manually.
• Use text, numeric, date, checkbox, and template columns.
• Support sorting, selection, frozen columns, and grid lines.

Appearance and layout

• Customize the expander width and column sizing.
• Freeze leading or trailing columns for easier navigation.
• Style rows, cells, headers, and hierarchy levels.

Interaction

• Expand and collapse nodes with built-in gestures.
• Select rows or cells using SelectionMode.
• Respond to item source changes through the ItemsSourceChanged event.

More

• Right-to-left support, localization, and accessibility.
• Shared Syncfusion MAUI styling and resource support.

---

Supported platforms and target frameworks

Platform	Target framework
Android	net9.0-android, net10.0-android
iOS	net9.0-ios, net10.0-ios
Mac Catalyst	net9.0-maccatalyst, net10.0-maccatalyst
Windows	net9.0-windows10.0.19041, net10.0-windows10.0.19041

Minimum OS versions follow the .NET MAUI supported platforms.

---

Installation

.NET CLI

dotnet add package Syncfusion.Maui.TreeGrid

Package Manager Console

Install-Package Syncfusion.Maui.TreeGrid

---

Getting started

1. Register the Syncfusion core handler

In MauiProgram.cs, call ConfigureSyncfusionCore():

using Syncfusion.Maui.Core.Hosting;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore();

        return builder.Build();
    }
}

2. Create a hierarchical model and view model

using System.Collections.ObjectModel;

public class EmployeeInfo
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Role { get; set; }
    public ObservableCollection<EmployeeInfo> Children { get; set; } = new();
}

public class TreeGridViewModel
{
    public ObservableCollection<EmployeeInfo> Employees { get; set; } = new();

    public TreeGridViewModel()
    {
        Employees = new ObservableCollection<EmployeeInfo>
        {
            new EmployeeInfo
            {
                ID = 1,
                Name = "John Smith",
                Role = "Manager",
                Children = new ObservableCollection<EmployeeInfo>
                {
                    new EmployeeInfo { ID = 2, Name = "Nancy Brown", Role = "Team Lead" },
                    new EmployeeInfo { ID = 3, Name = "Michael Lee", Role = "Developer" }
                }
            }
        };
    }
}

3. Add SfTreeGrid to your page

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:treegrid="clr-namespace:Syncfusion.Maui.TreeGrid;assembly=Syncfusion.Maui.TreeGrid"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">

    <ContentPage.BindingContext>
        <local:TreeGridViewModel />
    </ContentPage.BindingContext>

    <treegrid:SfTreeGrid ItemsSource="{Binding Employees}"
                         AutoGenerateColumnsMode="None"
                         ChildPropertyName="Children"
                         SelectionMode="Single">
        <treegrid:SfTreeGrid.Columns>
            <treegrid:TreeGridTextColumn MappingName="Name" HeaderText="Employee" />
            <treegrid:TreeGridTextColumn MappingName="Role" HeaderText="Role" />
            <treegrid:TreeGridNumericColumn MappingName="ID" HeaderText="ID" />
        </treegrid:SfTreeGrid.Columns>
    </treegrid:SfTreeGrid>

</ContentPage>

Run the app. The tree grid renders hierarchical rows and allows users to expand and collapse child records.

---

Common scenarios

Bind nested collections

<treegrid:SfTreeGrid ItemsSource="{Binding Employees}"
                     ChildPropertyName="Children" />

Use self-relational data

<treegrid:SfTreeGrid ItemsSource="{Binding Employees}"
                     ParentPropertyName="ReportsTo"
                     ChildPropertyName="Employees" />

Customize hierarchy and layout

<treegrid:SfTreeGrid ItemsSource="{Binding Employees}"
                     ChildPropertyName="Children"
                     AutoGenerateColumnsMode="Reset"
                     ExpanderWidth="32"
                     FrozenColumnCount="1"
                     SelectionMode="Multiple" />

Define columns manually

<treegrid:SfTreeGrid ItemsSource="{Binding Employees}"
                     ChildPropertyName="Children"
                     AutoGenerateColumnsMode="None">
    <treegrid:SfTreeGrid.Columns>
        <treegrid:TreeGridTextColumn MappingName="Name" HeaderText="Name" />
        <treegrid:TreeGridDateColumn MappingName="HireDate" HeaderText="Hire Date" />
        <treegrid:TreeGridCheckBoxColumn MappingName="IsActive" HeaderText="Active" />
    </treegrid:SfTreeGrid.Columns>
</treegrid:SfTreeGrid>

For more features, see the TreeGrid documentation.

---

Dependencies

Installing this package also installs the following packages:

• Syncfusion.Maui.Core
• Syncfusion.Maui.Data
• Syncfusion.Maui.GridCommon
• Syncfusion.Maui.Buttons
• Syncfusion.Telemetry

---

License

This is a commercial product and requires a paid license for possession or use. Syncfusion's licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. You can purchase a license here or start a free 30-day trial here.

Register your license key

Register the key in App.xaml.cs before the app is built:

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

For details, see Licensing overview.

---

Support and feedback

• Support tickets: Syncfusion Support Portal
• Community forums: .NET MAUI Forums
• Feature requests and bug reports: Feedback Portal
• Samples: Syncfusion .NET MAUI demos on GitHub

---

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 26,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1600+ components and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (.NET MAUI, Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, WinUI, Flutter and UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

[email protected] | www.syncfusion.com | Toll Free: 1-888-9 DOTNET