Showing hierarchical data in SfTreeview

[Marco Uffelmann]

Hi.

I have a SFTreeview showing hierachical data. The result that I actually see is this:

As you can see the headers (Eingangsrechnungen, Vertrag) for the first nodes are missing. The value is in the DoctypeName field. Please below for more information of the data object.

My XAML looks like this:

<syncfusion:SfTreeView

    x:Name="tvwDmsRecord_Documents"

    Visibility="Collapsed"

    AllowDrop="False"

    BorderThickness="0"

    ChildPropertyName="{Binding DoctypeName}"

    ExpandActionTrigger="Node"

    FocusVisualStyle="{x:Null}"

    FullRowSelect="True"

    IsAnimationEnabled="True"

    ItemsSource="{Binding ListOfDmsRecords_Document,Mode=TwoWay}"

    ShowLines="True">

    <syncfusion:SfTreeView.HierarchyPropertyDescriptors>

        <SfTreeItem:HierarchyPropertyDescriptor TargetType="{x:Type local:DmsRecords_DocumentsModel}" ChildPropertyName="DmsRecords_Document" />

    </syncfusion:SfTreeView.HierarchyPropertyDescriptors>

    <syncfusion:SfTreeView.ItemTemplate>

        <DataTemplate>

            <Label Content="{Binding originalname,Mode=TwoWay}"/>

        </DataTemplate>

    </syncfusion:SfTreeView.ItemTemplate>

</syncfusion:SfTreeView>

What I am doing wrong?

Your help is appreciated. Thank you.
Marco

Data objects details:

[Vijayarasan Sivanandham]

Hi Marco Uffelmann,

Your requirement to create sub tree nodes having different behavior and different appearance in SfTreeView can be achieved by using the ItemTemplateSelector and customizing the template based on your scenario. Please refer to the below code snippet,

XAML Code Snippet:

<Window.Resources>

<DataTemplate x:Key="firstLevelNodes">

            <Grid>               

                <!--here define the DocumentTypeName like Content.DocumentTypeName-->

                <!--example: <Label Content="{Binding Content.DocumentTypeName,Mode=TwoWay}"/>-->

                <Label Content="{Binding Content.Header,Mode=TwoWay}"/>              

            </Grid>

        </DataTemplate>

        <DataTemplate x:Key="secondLevelNodes">

            <Grid>

                <!--here define the originalname like Content.originalname-->

                <!--example: <Label Content="{Binding Content.originalname,Mode=TwoWay}"/>-->

                <Label Content="{Binding Content.Product,Mode=TwoWay}"/>               

            </Grid>

        </DataTemplate>

        <DataTemplate x:Key="thirdLevelNodes">

            <Grid>

                <Label Content="{Binding Content.Brand}" />

            </Grid>

        </DataTemplate>

        <DataTemplate x:Key="fourthLevelNodes">

            <Grid>

                <Label Content="{Binding Content.Price}"/>

            </Grid>

        </DataTemplate>

        <local:ItemTemplateSelector x:Key="itemTemplateSelector"/>       

</Window.Resources>

<Grid>

        <syncfusion:SfTreeView

                    x:Name="treeView"                  

                    AutoExpandMode="AllNodes"                  

                    ChildPropertyName="Models"

                    ItemTemplateDataContextType="Node"

                    ItemTemplateSelector="{StaticResource itemTemplateSelector}"

                    ItemsSource="{Binding Items}" >         

        </syncfusion:SfTreeView>

</Grid>

C# Code Snippet related to ItemTemplateSelector:

public class ItemTemplateSelector : DataTemplateSelector

{

        public override DataTemplate SelectTemplate(object item, DependencyObject container)

        {

            var treeviewNode = item as TreeViewNode;

            if (treeviewNode == null)

                return null;

 

            //here check the Node level and load the template based on your requirement

            if (treeviewNode.Level == 0)

                return Application.Current.MainWindow.FindResource("firstLevelNodes") as DataTemplate;

            else if(treeviewNode.Level == 1)

                return Application.Current.MainWindow.FindResource("secondLevelNodes") as DataTemplate;

            else if (treeviewNode.Level == 2)

                return Application.Current.MainWindow.FindResource("thirdLevelNodes") as DataTemplate;

            else

                return Application.Current.MainWindow.FindResource("fourthLevelNodes") as DataTemplate;

        }

}

UG Link: https://help.syncfusion.com/wpf/treeview/appearance#itemtemplate-selector

https://help.syncfusion.com/wpf/treeview/appearance#bindingcontext-for-itemtemplate

Please find the sample in the attachment and let us know if you have any concerns in this.

Regards,
Vijayarasan S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfTreeViewDemo_3f40c9da.zip

[Marco Uffelmann]

Hi Vijayarasan,

Many thanks for your help, very helpful. I will try to implement this.

Regards, Marco

[Vijayarasan Sivanandham]

Hi Marco Uffelmann,

Thanks for the update. Please test at your end. Also, please let us know if you require any further assistance on this. we will be happy to assist you.

Regards,

Vijayarasan S