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" />
</ig:HierarchicalDataTemplate.ItemTemplate>
</ig:HierarchicalDataTemplate>
</igTree:XamWebTree.HierarchicalItemTemplate>
</igTree:XamWebTree>
Thanks
Marcus
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:
CurrentLevelDataNextLevelCollection|--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,
Hi,
This still dosent work for me as it the same as I wrote above. I get the root level and the just child nodes below. My tree can be any number of levels deep.
I would have thought that it would use the same template at all levels if the ItemsSource was bound.
My xaml:
<igTree:XamWebTree x:Name="mytree" ItemsSource="{Binding TNodes}">
<igTree:XamWebTree.HierarchicalItemTemplate>
<TextBlock Text="{Binding name}" />
TNodes is and ObserableCollection of type node that have a "name" public property and a public Collection called "Children" containing child node objects.
If i use the MS tree it works fine I define a single Template and set the ItemsSource to the Children and it then uses that template for all nodes. Does your control work differently.
Yes, our control works in a different way. If your number of levels in the hierarchy is finite, you could define the template for this number of levels as follows:
<igTree:XamWebTree.HierarchicalItemTemplate> <ig:HierarchicalDataTemplate ItemsSource="{Binding NextLevelCollection}"> <DataTemplate> <TextBlock Text="{Binding CurrentLevelData}" /> </DataTemplate> <ig:HierarchicalDataTemplate.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> </ig:HierarchicalDataTemplate.HierarchicalItemTemplate> </ig:HierarchicalDataTemplate> </igTree:XamWebTree.HierarchicalItemTemplate>
this is for example a 3-level hierarchy. Repeat the nested HierarchicalDataTemplates for each level of hierarchy you have.
If you don't know the depth of your hierarchy, then you will need to set the Template and the ItemsSource correspondingly at runtime (which you are probably doing already for the ItemsSource), which will be something like the following:
DataTemplate tpl = (DataTemplate)this.Resources["MyDataTemplate"]; ;
HierarchicalDataTemplate treeItemTemplate = new HierarchicalDataTemplate(); treeItemTemplate.Template = tpl; treeItemTemplate.ItemTemplate = tpl;
navigationTree.ItemsSource = testItemsRoot.TestNavigationItems; if (testItemsRoot.TestNavigationItems != null && testItemsRoot.TestNavigationItems.Count > 0) navigationTree.HierarchicalItemTemplate = treeItemTemplate;
List<XamWebTreeItem> parents = navigationTree.XamWebTreeItems.ToList(), parentstmp = new List<XamWebTreeItem>(); ObservableCollection<TestNavigation> testItems = testItemsRoot.TestNavigationItems; while (parents.Count() > 0) { parentstmp = new List<XamWebTreeItem>(); foreach (XamWebTreeItem i in parents) { if (((TestNavigation)i.Data).TestNavigationItems == null || ((TestNavigation)i.Data).TestNavigationItems.Count == 0) continue;
i.ItemsSource = ((TestNavigation)i.Data).TestNavigationItems; i.HierarchicalItemTemplate = treeItemTemplate;
parentstmp.AddRange(i.XamWebTreeItems.ToList()); } parents = parentstmp; }
where testItemsRoot is my data source and TestNavigation is my data object type.
Thanks for that. I was affraid that would be the case.
I am using the MVVM pattern so am wanting to bind the view to the viewmodel with out that much code behind.
Cheers
We've talked internally about ways we can add this feature to the control, but currently we have not assigned the work to any specific release.
Devin
Hi, Is this going to change any time soon ? as I really want just one template that I can reuse.
There are no other way to do this easier?