How to set HierarchicalDataTemplate in Syncfusion:SfTreeView

Question

I have two Models called ExcelFileModel and ExcelSheetModel like below:

using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;

    public partial class ExcelFileModel : ObservableObject
    {
        [ObservableProperty] private string _fileName=string.Empty;
        [ObservableProperty] private string _filePath=string.Empty;
        [ObservableProperty] private bool _isChecked=false;

        [ObservableProperty]
        private ObservableCollection<ExcelSheetModel> _sheetsCollection = new ObservableCollection<ExcelSheetModel>();
    }

    public partial class ExcelSheetModel : ObservableObject
    {
        [ObservableProperty] 
        private string _sheetName= string.Empty;
        [ObservableProperty] private string _parentExcelFileName = string.Empty;
        [ObservableProperty] private bool _isChecked=false;
    }

I the MainWindowViewModel is like:

    public partial class MainWindowViewModel : ObservableObject
    {
        [ObservableProperty] private string _title = "Excel Combine";

        [ObservableProperty]
        private ObservableCollection<ExcelFileModel> _excelFiles = new ObservableCollection<ExcelFileModel>();

        [ObservableProperty]
        private ObservableCollection<ExcelSheetModel> _excelSheet = new ObservableCollection<ExcelSheetModel>();

        public MainWindowViewModel()
        {
            ExcelSheet.Add(new ExcelSheetModel() {SheetName = "1", ParentExcelFileName = "FileA"});
            ExcelSheet.Add(new ExcelSheetModel() {SheetName = "2", ParentExcelFileName = "FileA"});
            ExcelSheet.Add(new ExcelSheetModel() {SheetName = "3", ParentExcelFileName = "FileA"});
            ExcelSheet.Add(new ExcelSheetModel() {SheetName = "4", ParentExcelFileName = "FileA"});
            ExcelSheet.Add(new ExcelSheetModel() {SheetName = "5", ParentExcelFileName = "FileA"});
            ExcelSheet.Add(new ExcelSheetModel() {SheetName = "6", ParentExcelFileName = "FileA"});


            ExcelFiles.Add(new ExcelFileModel() {FileName = "FileA", FilePath = "File A Path", SheetsCollection = ExcelSheet});
            ExcelFiles.Add(new ExcelFileModel()
            {
                FileName = "FileB", 
                FilePath = "File A Path", 
                SheetsCollection = new ObservableCollection<ExcelSheetModel>()
                {
                    new ExcelSheetModel(){SheetName="Sheet1"},
                    new ExcelSheetModel(){SheetName="Sheet2"},
                } 
            });
        }
    }

Now I want to bind the ExcelFiles to the Syncfusion:SfViewTree, the xaml is below:

        <syncfusion:SfTreeView
            Grid.Column="0"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            CheckBoxMode="Recursive"
            ItemsSource="{Binding ExcelFiles}"
            ChildPropertyName="SheetsCollection"
            AutoExpandMode="RootNodes"
            Margin="0,0,0,0">

            <syncfusion:SfTreeView.Resources>
                <HierarchicalDataTemplate DataType="{x:Type models:ExcelFileModel}"
                                          ItemsSource="{Binding SheetsCollection}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <CheckBox Grid.Column="0" IsChecked="{Binding IsChecked}" />
                        <TextBox Grid.Column="1" Text="{Binding FileName}" />
                    </Grid>
                </HierarchicalDataTemplate>
                <HierarchicalDataTemplate DataType="{x:Type models:ExcelSheetModel}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <CheckBox Grid.Column="0" IsChecked="{Binding IsChecked}" />
                        <TextBox Grid.Column="1" Text="{Binding SheetName}" />
                    </Grid>
                </HierarchicalDataTemplate>
            </syncfusion:SfTreeView.Resources>

But the FileName and SheetName are not showing correctly, the same code for TreeView is working. I noticed the example from Syncfusion is use the same property name for binding, such as Name in ExcelFileModel and Name in ExcelSheetModel.

How should I set the Xaml to show different Models in this case?

I want to correctly display the FileName and SheetName in Syncfusion:SfTreeView with HierarchicalDataTemplate.

Answer 1

Currently, Syncfusion SfTreeView does not support the HierarchicalDataTemplate as ItemTemplate. However, you can populate data by creating a hierarchical data model and binding it to SfTreeview. For more information related to Data Population, please refer to the below user guide documentation,

UG Link: Data Population

Hierarchical DataSource