Databinding to a 3 level deep tree does not work

[Chad]

Hi,
I have been trying to bind data 3 lists to make a 3 level tree for approx. 10 hours now....
First I would like to say that I am very dissapointed with the difficulty in using the telerik silverlight tools.  I have never coded XML, or XAML before, so I will take some of the blame for not being able to get this to work, but, I thought that was the reason for these tools, so that you don't need to know how the inner workings of the program work, so that you can spend more time designing.  I think you guys should keep in mind that complete novices are going to be using your tools, and so very minimal coding should be required, that is why I first decided to use telerik's products (ASP.Net is awesome btw).  Anyway, that was my little rant... I'm a bit frusterated.  So here is my code:

<xaml>
       <UserControl.Resources>
        <WTXNetSilver:TreeArea x:Key="TreeAreaDS"/>
        
        <DataTemplate x:Key="well">
            <TextBlock Text="{Binding Name}" Foreground="Green" FontStyle="Italic" />
        </DataTemplate>


        <core:HierarchicalDataTemplate x:Key="battery" ItemsSource="{Binding well}">
            <TextBlock Text="{Binding Name}" Foreground="Green" FontStyle="Italic" />
        </core:HierarchicalDataTemplate>


        <core:HierarchicalDataTemplate x:Key="area" ItemsSource="{Binding battery}">
            <TextBlock Text="{Binding Name}" Foreground="Green" FontStyle="Italic" />
        </core:HierarchicalDataTemplate>

    </UserControl.Resources>

Then I call this : <telerikNavigation:RadTreeView x:Name="treeWells" ItemsSource="{Binding Source={StaticResource TreeAreaDS}}" ItemTemplate="{StaticResource area}" /> in my grid.

</xaml>

(this is my baby... took me 10 hours of scouring the Net/ Trial and error of using the examples, to get to this point.... I'll just wait until you stop laughing..   :)   )


Here are my Lists.

 public class TreeArea
    {
        public string Name { get; set; }
        public string ID { get; set; }
        public List<Battery> battery { get; set; }

    }

    public class Battery
    {
        public string Name { get; set; }
        public string ID {get;set;}
        public List<Well> well { get; set; }
        
    }

    public class Well
    {
        public string Name { get; set; }
        public string ID { get; set; }

    }


so I populate an area list like this:
treeWells is my Tree.

  treeWells.ItemsSource = treeArea;


So what happens is that the Area displays, and I can expand the area to get the battery, but I cannot expand the battery to get the wells.

Area--Battery--- Cannot expand to get wells!!
           
Also, I tried to use Microsoft Expressions to make the tree automatically, but it won't make more than a 1-teir tree.  >:(  I was so happy when I found  out that I could generate the tree automatically, only to have it turned to horror as I realized that the feature was unfinished.


help would be much appreciated. 


Thanks,
Chad

[Ivan]

Hi Chad,

I am sorry to know you have troubles with our product.

I prepared a small project which conforms to the structure of your example. Attached you can find it. Please give it a try and let me know if there are other questions.

PS: In order to locate the eventual hard point of beginning with our controls I found some old stuff in our documentation - all of this is addressed to the right member of our team. As a small reward we updated your Telerik points.

Kind regards,
Ivan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Chad]

Thank you very much, it worked, I'm just wondering what I did wrong in my code though.



<ds:TreeAreaDataSource x:Key="TreeAreaDS" />
        <!--
        <DataTemplate x:Key="well">
            <TextBlock Text="{Binding Name}" Foreground="Green" FontStyle="Italic" />
        </DataTemplate> -->



        <core:HierarchicalDataTemplate x:Key="battery" ItemsSource="{Binding well}">
            <TextBlock Text="{Binding Name}" Foreground="Green" FontStyle="Italic" />
        </core:HierarchicalDataTemplate>
       

<!--
        <core:HierarchicalDataTemplate
            x:Key="area"
            ItemsSource="{Binding battery}"> -->



        <core:HierarchicalDataTemplate x:Key="area" ItemsSource="{Binding battery}"
                ItemTemplate="{StaticResource battery}">
            <TextBlock Text="{Binding Name}" Foreground="Green" FontStyle="Italic" />
        </core:HierarchicalDataTemplate>
  


</UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadTreeView x:Name="treeWells" Width="555" Height="555" HorizontalAlignment="Left"
                VerticalAlignment="Top" ItemsSource="{Binding Source={StaticResource TreeAreaDS}}"
                ItemTemplate="{StaticResource area}" />


It looks like I needed to set the itemTemplate.  Was that what was messing up my tree?

[Ivan]

Hello Chad,

There are some simple rules when the HierarchicalDataTemplate is used:
A. If the described item has subitems/children then we are using the form of HierarchicalDataTemplate;
B. If the described item is a leaf (i.e. without children by design) we do not need the HierarchicalDataTemplate form but just the DataTemplate.

To demonstrate the case deeply I modified the example. I put two trees in the page in order to compare the usage of item templates. Both trees are using the same DataSoutce object but the visual result is quite different. I changed some of property and template names in order to make the code more straightforward(batteryTemplate, batteryList, etc.). I put some comments inside the xaml file to divide the code related to the first and the second trees. Here is a brief description of what I done and why:

1. The data source - equal for both trees.
2. The first Tree - myTree:
   
   1. we are using two HierarchicalDataTemplat for first two level of the tree because they have sub items;
      
   2. we skipped the usage of DataTemplate for the third level items because we not set the ItemTemplate in batteryTemplate and the item's text is bound to the same named properties - Name. Please note that the Foreground color and the Italic modification are applied too.
3. The second Tree - myTree2:
   1. we are using item templates for all items: areaTemplate2, batteryTemplate2 and wellTemplate2.
   2. note in batteryTemplate2we initialized the ItemTemplate.
   3. the wellTemplate2 is of type DataTemplate - remember the simple rules at the beginning.

Please note the trick from the 2.2. point is not a good practice because we rely on the same named properties but if we changed for example the name of Well.Name to the Well.WellName (i put the code for this case in comments in both xaml and cs files) than the text from the well-items will disappear.

All the best,
Ivan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.