C1WebTreeView is a tree type Web control that displays a hierarchical tree structure. A tree contains one or more elements where each element is a node. A tree structure is a way of representing hierarchical data into a graphical form.
A common tree structure consists of the following nodes:
• Parent node is a node that contains other nodes.
• Child node is a node that is contained by another node.
• Leaf node is a node that does not contain child nodes.
The C1WebTreeView control is a descendant of the C1WebCustomTreeControl class. Like the classic tree structure, the C1WebTreeView contains one or more nodes that consist of parent, child, and leaf nodes. The C1WebTreeView control's parent nodes are referred as the C1WebTreeViewItems, the child nodes are referred as ChildGroups and the leaf nodes are referred as ChildGroup items or subtreeview items.
C1WebTreeView is drawn like the inverted tree where the root appears first. The C1WebTreeView can contain one or more root nodes. Each node can be collapsed or expanded; additionally it can have text and an image associated with it. The tree node can be rendered as a hyperlink and have a URL associated with it. Each tree view item can also have an arbitrary number of children treeview objects. The picture below illustrates a few of C1WebTreeView's properties:
Advantages
A tree view is commonly used for navigation and searching, browsing through information, and re-ordering and copying information. Below are some of its key advantages:
• Presents an excellent overview of large information and shows how different objects are related to each other.
• Compacts large quantities of information into an easily readable form that shows the key elements.
• Organizes data into central locations which makes the data faster and more accessible.
Features
The C1WebTreeView control supports the following features:
• Provides speed, usability, and scalability through AJAX (Asynchronous JavaScript And XML) mechanism.
• Data binding that allows the items of the control to be bound to XML data through the XMLDataSource control.
• Site navigation through uniting with the SiteMapDataSource control.
• Static and dynamic creation of C1WebTreeView through the C1WebTreeView Collection Editor or through programmatic access from the C1WebCustomTreeControl class.
Design
The picture below is a basic design of the C1WebTreeView. In this particular design there is one group, Products, and four nested groups. The Products' group represents the Parent node. The four nested groups are Product1, Product2, Product3, and Product4. In Tree-View terminology, each group is known as Children. Each child contains an Overview, Download, and Support item. Since these items don't contain children nodes, they are known as the leaves of the C1WebTreeView.
|
The outlined structure shown below represents the elements in Figure1.
|
Figure1 |
|
Example: C1WebTreeView1 | - Item1 (C1WebTreeViewItem) | - Item2 (C1WebTreeViewItem) | + Group1 (ChildGroup) | | - Item1 (Link) | | - Item2 (Link) | | - Item3 (Link) | - Item3 (C1WebTreeViewItem) | + Group2 (ChildGroup) | | - Item4 (Link) | | - Item5 (Link) | | - Item6 (Link) | - Item4 (C1WebTreeViewItem) | + Group3 (ChildGroup) | | - Item7 (Link) | | - Item8 (Link) | | - Item9 (Link) | - Item5 (C1WebTreeViewItem) | +Group4 (ChildGroup) | | - Item10 (Link) | | - Item11 (Link) | | - Item12 (Link) |
|
On Figure1, the C1WebTreeViewItems, Home and Products, are accessed in C1WebTreeView's collection like shown in the code below:
Dim treeview As New C1.Web.Command.C1WebTreeView()
'Target IFRAME
Treeview.Target = "right"
Dim item As C1WebTreeViewItem
treeview.Items.Add(New C1WebTreeViewItem("Home", "RightFrame.aspx?key=Home"))
treeview.Items.Add(New C1WebTreeViewItem("Products"))
• C#
//Create an instance of the class
C1WebTreeView treeview = new C1WebTreeView();
//Target IFRAME
Treeview.Target = "right";
C1WebTreeViewItem item;
treeview.Items.Add(new C1WebTreeViewItem("Home", "RightFrame.aspx?key=Home"));
treeview.Items.Add(new C1WebTreeViewItem("Products"));
On Figure1, the ChildGroups Product1, Product2, Product3, and Product4 are accessed in C1WebTreeView's collection like shown in the code below:
'Add the SubTree
item = CType(treeview.Items(1), C1WebTreeViewItem)
' Create subtreeview
item.CreateChildGroup()
' Add subtreeview items under "Products"
item.ChildGroup.Items.Add(New C1WebTreeViewItem("Product 1"))
item.ChildGroup.Items.Add(New C1WebTreeViewItem("Product 2"))
item.ChildGroup.Items.Add(New C1WebTreeViewItem("Product 3"))
item.ChildGroup.Items.Add(New C1WebTreeViewItem("Product 4"))
• C#
//Add the SubTree
item = (C1WebTreeViewItem)treeview.Items[1];
// Create subtreeview
item.CreateChildGroup();
// Add subtreeview items under "Products"
item.ChildGroup.Items.Add(new C1WebTreeViewItem("Product 1"));
item.ChildGroup.Items.Add(new C1WebTreeViewItem("Product 2"));
item.ChildGroup.Items.Add(new C1WebTreeViewItem("Product 3"));
item.ChildGroup.Items.Add(new C1WebTreeViewItem("Product 4"));
On Figure1, the ChildGroups items for Overview are accessed in C1WebTreeView's collection like shown in the code below:
' Create subtreeview
subitem = CType(item.ChildGroup.Items(0), C1WebTreeViewItem)
subitem.CreateChildGroup()
subitem.ChildGroup.Items.Add(new C1WebTreeViewItem("Overview", "RightFrame.aspx?key=Product1Overview"))
subitem = CType(item.ChildGroup.Items(1), C1WebTreeViewItem)
subitem.CreateChildGroup()
subitem.ChildGroup.Items.Add(new C1WebTreeViewItem("Overview", "RightFrame.aspx?key=Product2Overview"))
subitem = CType(item.ChildGroup.Items(2), C1WebTreeViewItem)
subitem.CreateChildGroup()
subitem.ChildGroup.Items.Add(new C1WebTreeViewItem("Overview", "RightFrame.aspx?key=Product3Overview"))
subitem.ChildGroup.Items.Add(new C1WebTreeViewItem("Download",
subitem = CType(item.ChildGroup.Items(3), C1WebTreeViewItem)
subitem.CreateChildGroup()
subitem.ChildGroup.Items.Add(new C1WebTreeViewItem("Overview", "RightFrame.aspx?key=Product4Overview"))
• C#
// Create subtreeview
subitem = (C1WebTreeViewItem)item.ChildGroup.Items[0];
subitem.CreateChildGroup();
subitem.ChildGroup.Items.Add(new C1WebTreeViewItem("Overview", "RightFrame.aspx?key=Product1Overview"));
subitem = (C1WebTreeViewItem)item.ChildGroup.Items[1];
subitem.CreateChildGroup();
subitem.ChildGroup.Items.Add(new C1WebTreeViewItem("Overview", "RightFrame.aspx?key=Product2Overview"));
subitem = (C1WebTreeViewItem)item.ChildGroup.Items[2];
subitem.CreateChildGroup();
subitem.ChildGroup.Items.Add(new C1WebTreeViewItem("Overview", "RightFrame.aspx?key=Product3Overview"));
subitem.ChildGroup.Items.Add(new C1WebTreeViewItem("Download",
subitem = (C1WebTreeViewItem)item.ChildGroup.Items[3];
subitem.CreateChildGroup();
subitem.ChildGroup.Items.Add(new C1WebTreeViewItem("Overview", "RightFrame.aspx?key=Product4Overview"));
Populating Tree Items with AJAX
Applying Data Binding to the C1WebTreeView
Creating a Static or Dynamic TreeView
|
