Silverlight - Hierarchical treeview from sql database vb.net

Question

I need some help with populating a treeview from a sql database, simple right, just look at the thousands of examples and adapt. Problem is I have tried for about a week to use many many different samples and I am still nowhere. I am not a programmer so its tough to understand some of the basics everyone takes for granted. I have developed an asp.net web app that keeps track of projects and their deadlines for management to scrutenise, the application is complete and working but now want to move to Silverlight and got a request from an exco member to have the entire structure displayed as a treeview (sure, no problem, easy as pie)

Here is the scenario:

All Departments

  Coffee Exco
       Project 1
            Action 1
            Action 2
       Project 2
            Action 1
  Credit Analytics
       Project 3
            Action 1

Currently I have 2 Tables that store the data needed for the treeview. I can get the data no problem, its trying to get it into a hierarchical treeview that I cannot seem to get right.

Sample data in database:

Tab1ID|Department|Project|Deadline|Owner|Completed
 1 Coffee Exco     Project      3/31/2013Public          0
 2 Credit AnalyticsProject      4/20/2013Public          0
 3 Coffee Exco     Project       5/1/2013Public          0

Tab2ID|Project|Action|ActionDeadline|Progress
 1Project 1     Action 1                   10
 2Project 1     Action 2                    0
 3Project 2     Action 1                    0

Like I said, I have tried so many different samples I now have no idea what to do, if someone could walk an old dog through the process step by step and assume he is not the brightest I would be eternally grateful. I don't mind doing it either through XAML or code-behind. I would appreciate an end to end example if at all possible.

Kind regards, Jacques

Answer 1

Yes I remember struggling with treeview for ages to get it to work.

The trick I found was getting your head around then item template. Here's an example I use:

    <controls:TreeView Name="TreeViewCategories"
                       Height="372" HorizontalAlignment="Left" Margin="12,12,0,0" VerticalAlignment="Top" Width="419">
        <controls:TreeView.ItemTemplate>
            <common:HierarchicalDataTemplate ItemsSource="{Binding ChildCategories}" >
                <TextBlock Text="{Binding Name, Mode=TwoWay}" Name="TxtCategoryName" />
            </common:HierarchicalDataTemplate>
        </controls:TreeView.ItemTemplate>
    </controls:TreeView>

The above is for a tree view of categories (so you have a categories, within in that sub-categories, within then sub-sub-categories and on it goes). Please note it's the same class at every level - ie top level are of type "Category", their sub-categories are also of type "Category", and on it goes. I'll come back to this point later.

So we have the outer treeview control. Then inside we have the item template. The ItemsSource is the point to note. This tells the binding where to look for the child objects. For me each categories contains a collection of "ChildCategories".

Finally inside that I have how I would like the items to display, that's in a text block for me.

I give the treeview an itemsSource which is a collection of the top level Categories only, and the tree view will then display them and their children within.

I've only used treeviews where each item is of the same class. This is a fairly straight forward implementation as in the above the ItemTemplate is the same at every level - it's always looking for the "ChildCategories" within the Categories in question, no matter if it's a top level, 2nd level or any other level.

In your case it would be different - your top level will be looking for projects. But each Project would be looking for Actions within.

Also coming back to your table structure at the top - you have Departments within the first table, perhaps it would be more puritan to have a separate table of Departments.

The you would have Departments, which look for Projects within. And the projects would look for Actions within them.

The treeview is setup to always have the same class at every level - every level uses the same ItemTemplate, and so looks for the same collection of children (in my case it always looks for "ChildCategories" within whatever we are looking at).

Ideas for you:

1. Put some form of wrapper class around your items, so it's always the same.

2. Try just using your current classes but adding properties client side so they all have, for example, a collection called "Children" and a string called "DisplayNameForTreeView".

I hope that helps get your head around your particular problem, certainly it was that concept that held me up for a while.

You could try reading these: How can I have multiple types of children in a single Silverlight TreeView node? http://social.msdn.microsoft.com/Forums/en-US/silverlightcontrols/thread/5d648c2f-f636-4093-9616-883fe43d5524/