Let us take a real world example to use XTreeView. Here, I
have the database of Pakistan’s cities. There are three tables in it. They are
related with each other with parent child relationship. The following figure
shows this.
Figure 5
In Pakistan we have Provinces, a province can have multiple
regional Divisions and a division can have multiple Districts. Hence, as shown
in the above diagram, we have Provinces as parent table, Divisions as child
table that has ProvinceID as foreign key, and Districts as the grand child
table having DivisionID as the foreign key. Now let us see how we can bind this
database with XtreeView. First, drag XTreeView control and drop on the page and
set the aforementioned properties. The following listing shows this.
Listing 5
<cc1:XTreeView ID="XTreeView1"
runat="server"
ConnectionString="Data Source=gmohyd-serv;Initial Catalog=pakistan_db;Integrated Security=True"
ParentTableName="Provinces"
ParentNodeTextField="ProvinceName"
ParentNodeValueField="ProvinceURL"
ParentChildRealtionField="ProvinceID"
ChildTableName="Divisions"
ChildNodeTextField="DivisionName"
ChildNodeValueField="DivisionURL"
ChildParentRelationField="ProvinceID"
ChildGrandChildRelationField="DivisionID"
GrandChildTableName="Districts"
GrandChildNodeTextField="DistrictName"
GrandChildNodeValueField="DistrictURL"
GrandChildRelationField="DivisionID" >
</cc1:XTreeView>
The properties in bold are mandatory. If you do not set
other properties, even then it works fine. By default, it takes the first field
as the value field and the second field as the text field. If you have tables
with this design then you do not need to set all properties, go for only the
mandatory ones.
You might have noticed that in Child part of properties we
have two properties for the relation fields. Since it is mandatory to relate
the child with its parent and its grand child, we require ChildParentRelationField
and ChildGrandChildRelationField for its relation with parent and grand child,respectively.
Hence it accomplishes binding XTreeView with database. Here
is the output when viewed in the browser.
Figure 6
