Wednesday, June 27, 2007

Hierarchical databinding into TreeView

<XmlDataProvider x:Key="Company" XPath="*">
<Reporting xmlns="">
<Person Name="CEO">
<Person Name="GM" >
<Person Name="PM-1" />
<Person Name="PM-2" >
<Person Name="PL" />
</Person >
<Person Name="PM-3" />
<Person Name="PM-4">
<Person Name="PL-2" />
<Person Name="PL-3" />
<Person Name="PM-5" />
<HierarchicalDataTemplate DataType="Person" ItemsSource ="{Binding XPath=*}">
<TextBlock Text="{Binding XPath=@Name}" />

<TreeView ItemsSource="{Binding Source={StaticResource Company}, XPath=*}"/>


  1. Hi,

    I have a DB table [1] which is self referenced. DataID field is the FK of ParentDataID field. For multilevel hierarchical data binding to a WPF tree view control, I have a stored procedure that returns result set in the below mentioned order[1]. The below result set contains all the top level data with NULL ParentDataID data & all the child records has the ParentDataID field data as the pointer to its parent data.

    Based on the below dataset structure, we have a requirement to bind the resultset with the multi level hierarical data to the TreeView control. How can we achive this funcionality of binding the dynamic hierarical multi level dataset to TreeView?

    After binding the above result set, the Tree View data needs to be displayed in the below format. How do we implement this in the WPF Tree View?

    * Test 1

    * Test 2

    * Test 5

    * Test 3

    * Test 6

    * Test 4


    DataID ParentDataID Description
    ====== ============ ===========
    1 NULL Test 1
    2 1 Test 2
    3 1 Test 3
    4 1 Test 4
    5 2 Test 5
    6 3 Test 6

    Vipul Mehta

  2. how to add images to this data-bound treeview?

  3. This comment has been removed by a blog administrator.

  4. THe images can be added by editing the template..

    Method one:
    Have one imagesource property in the node data class and bind the image that property.This is useful if you are using node dependent images such as person images in an organization treeview

    Method 2:
    Have some static images and bind the images to nodes through a converter which works based on the node data.for eg: if you want to show the status of files like check out.Use this is the images are predefined

  5. Vipul,

    For achieving your requirement I would suggest the following.
    -Create an entity class with data and the parent object
    class Test{
    string data;
    List Children;
    -Load this data structure using the stored procedure.
    - Change the hierarchical data template as

    This is just a pseudo code to demo the idea...

  6. On your blog the solution is not seen, can you pls re post the solution for Vipul's question?


  7. Hi Vasudha,

    Seems the tags '< >' got deleted automatically. so posting with encoding.

    <TextBlock Text="{Binding Path=Data}" />

    If you are trying on an sample and getting any issue please send that to me to check.