Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
marcus
515
Data binding
posted

I am looking for a little help using the tree control. I have a ObservableCollection of nodes in a hierarchy on my ViewModel

i.e each node has a Childrens Collection.

I then bind the xamWebTree to the nodes collection. Looking at the examples I have defined a HierarchicalItemTemplate.

But this only shows not 1 level deep.  I was expecting it to use the template n levels deep ? is this possible ?

 

<igTree:XamWebTree x:Name="contextTree" ItemsSource="{Binding TNodes}">

<igTree:XamWebTree.HierarchicalItemTemplate >

<ig:HierarchicalDataTemplate ItemsSource="{Binding Children}">

<DataTemplate>

<TextBlock Text="{Binding name}" Margin="5,0,0,0" />

</DataTemplate>

<ig:HierarchicalDataTemplate.ItemTemplate>

<DataTemplate >

<TextBlock Text="{Binding name}" Foreground="Gray" Margin="5,0,0,0" />

</DataTemplate>

</ig:HierarchicalDataTemplate.ItemTemplate>

</ig:HierarchicalDataTemplate>

</igTree:XamWebTree.HierarchicalItemTemplate>

</igTree:XamWebTree>

Thanks

Marcus

  • 5595
    posted

    Hi Marcus,

    You need to define a Data Template for each level, this could be done for example with IG HierarchicalDataTemplate or by setting the Data Template for the corresponding level of the corresponding parent node. I am giving you a sample for the first case:

     

                 xmlns:ig="clr-namespace:Infragistics.Silverlight.Controls;assembly=Infragistics.Silverlight.v9.1"
                 xmlns:igTree="clr-namespace:Infragistics.Silverlight.Controls;assembly=Infragistics.Silverlight.XamWebTree.v9.1"

    <igTree:XamWebTree x:Name="MyTree" ItemsSource="{StaticResource MyDataSource}">
                <igTree:XamWebTree.HierarchicalItemTemplate>
                    <ig:HierarchicalDataTemplate ItemsSource="{Binding NextLevelCollection}">
                        <DataTemplate>
                            <TextBlock Text="{Binding CurrentLevelData}" />
                        </DataTemplate>
                        <ig:HierarchicalDataTemplate.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding CurrentLevelData}" />
                            </DataTemplate>
                        </ig:HierarchicalDataTemplate.ItemTemplate>
                    </ig:HierarchicalDataTemplate>
                </igTree:XamWebTree.HierarchicalItemTemplate>
            </igTree:XamWebTree>

    where:

    -MyDataSource is your data source defined in a ResourceDictionary. Note that this could also be set via c#, e.g. MyTree.ItemsSource = new DataSource();

    -note the usage of the HierarchicalItemTemplate property on the XamWebTree, which accepts ig:HierarchicalDataTemplate - this is a template defining which collection to bind to (ItemsSource) and also how to present the data from the data source object as a tree item (ItemTemplate) and this is difined for as many levels as you would like to use. In this case you would have a data source with the following structure:

    CurrentLevelData
    NextLevelCollection
    |
    --CurrentLevelData
    --NextLevelCollection
       |
       --CurrentLevelData
       --NextLevelCollection

    CurrentLevelData
    NextLevelCollection
    |
    --CurrentLevelData
    --NextLevelCollection

    CurrentLevelData
    NextLevelCollection
    |
    --CurrentLevelData
    --NextLevelCollection

     

    etc.

     

    I know it could be a little confusing sometimes, so if you have any further questions please let us know.

     

     

    HTH,