How to bind to multiple DataTemplates?

4 posts, 0 answers
  1. toddhd
    toddhd avatar
    21 posts
    Member since:
    Aug 2006

    Posted 14 Sep 2010 Link to this post

    Hopefully, I can explain this in a way that makes sense...

    I have an object that has multiple collections in it's root, and I'd like to bind it to a RadTreeView control, using XAML and HierarchicalDataTemplates and DataTemplates.

    I've done this before when the tree has a collection that has a collection, etc. (Similar as shown in your help files). So the resulting tree would look like this:

    Company

    + Department1

        + Employee1

        + Employee2

    + Department 2

        + Employee3

    That works really well because Company has only one collection bound to a DataTemplate which contains the Departments, and Department has only one collection bound to a DataTemplate that contains the Employees, and so on.

    Now, if the root object is setup a little differently (and I know this is a stupid made up example, but roll with me here) then things get trickier because the Company object would need to address three DataTemplates, one for each of the collections in it's root, represented by different folders... for example:

    Company

    + Employees

        + Employee1

        + Employee2

    + Departments

        + Department1

        + Department2

    + Locations

        + Location1

    SO... can anyone give me an example of how I would code the XAML so that I could bind the above object to a TreeView control and have it bind/display correctly?
  2. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 16 Sep 2010 Link to this post

    Hi toddhd,

    You can use ItemTemplateSelector property of RadTreeView.

    Passing an instance of DataTemplateSelector or its derivative to the ItemTemplateSelector enables the tree view to apply different data templates to its elements.

    In DataTemplateSelector derived class you should implement custom logic that determines which item template to be used for the particular element.
    Next will be to define different data templates and set their ItemsSource properties correctly.

    I've attached a sample project demonstrating the described approach.

    Greetings,
    Hristo Milyakov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. toddhd
    toddhd avatar
    21 posts
    Member since:
    Aug 2006

    Posted 16 Sep 2010 Link to this post

    Thank you for your reply and sample application, however I don't think it correctly addresses the problem at hand. The sample you attached still has only one collection property per object that needs to be rendered. Even without the use of the DataTemplateSelector, that would easily addressed by using a HeirarchicalDataTemplate and assigning the collection to it's ItemsSource property.

    If I understand it correctly, the DataTemplateSelector only chooses different templates based on some value of a given property. But only one property. For example, I can say if Name==Todd, then make the font red, and if Name==Joe, make the font green. But in every case, we are evaluating Name.

    The problem I have is that I have an object that has more than one collection as properties of the object. So using the example I used above, it might look like this:

    public class Company
    {
        public string CompanyName { get; set; }
        public ObservableCollection<Employee> Employees { get; set; }
        public ObservableCollection<Department> Departments{ get; set; }
        public ObservableCollection<Location> Locations{ get; set; }
    }

    Now, the problem with a HeirarchicalDataTemplate orDataTemplateSelector is that I can still only assign ONE ItemsSource to it. But I have THREE collections that each need to be bound to a DataTemplate of some sort. If Silverlight would let me, it would look something like this:

    <RadTreeView ItemTemplate="{StaticResource CompanyTemplate}" ItemsSource="{Binding}"/>

    <HeirarchicalDataTemplate x:Key="CompanyTemplate">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="{Binding Name}"/>
            <HeirarchicalDataTemplate ItemTemplate="{StaticResource EmployeeTemplate}" ItemsSource="{Employees}"/>
            <HeirarchicalDataTemplate ItemTemplate="{StaticResource DepartmentTemplate}" ItemsSource="{Departments}"/>
            <HeirarchicalDataTemplate ItemTemplate="{StaticResource LocationTemplate}" ItemsSource="{Locations}"/>
        </StackPanel>
    </HeirarchicalDataTemplate>

    That would probably work, but as I said, Silverlight doesn't seem to like having DataTemplates within DataTemplates.

    I did try making an alternative version of the above - I replaced the HeirarchicalDataTemplates with more Treeviews. The kinda does the trick, except that you lose the abilty to collapse the nodes properly, and everything just up as one, HUGE node. Not exactly what I was looking for, but closer.

    Does that help?
  5. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 17 Sep 2010 Link to this post

    Hi toddhd,

    Yes you are right. The template selector chooses template based on the value of some property. Unfortunately you can not have multiple item sources. Meaning you can not set several data templates for each of your collections. In fact, data template declares how the data from the ItemSource property should be displayed.
    Given this fact, I can offer you following solution: merge the three collections into one with objects of a more general type. This way you can employ the ItemTemplateSelector and assign the proper template for each element. You can define custom property to use in the template selector or do a little bit more trickier comparison using the object type. This is the solution I would like to recommend you. However there is one more approach you can try.

    The other solution is slight modification of the code you provided bellow. Perhaps it is very close to what you described. But you will end up with several collapsible nodes. You are not allowed to use HierarchicalDatatemplate as an visual element inside another HierarchicalDataTemplate. but you can use another tree view and assign the second data template to it. Please take a look at the attached project for more details on the implementation. Finally you need to change a bit the style of the highlighted/selected element in the tree view and take care for multiple selected items. I do not encourage you to use this approach.

    Regards,
    Hristo Milyakov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top