This tutorial shows how to dynamically add two C1WebTreeView groups and two items to each group. An event handler is created for the C1WebTreeView's ItemPopulate event. When the Static, Group A, or Group B item is clicked at run-time the ItemPopulate event fires and the items for the selected group are populated dynamically. An iteration is used to enable the PopulateOnDemand property for each C1WebTreeView item.
To dynamically create tree items, then populate each tree item using the PopulateOnDemand property, complete the following tasks:
1. Add a C1WebTreeView control on your Web site, then right-click on it and select Edit from its context menu. The C1WebCommandEditor appears.
2. Select Item1 and rename it to Static, then delete C1WebTreeViewGroup and Item2, and then select OK.
3. In the Page_Load event procedure add two new C1WebTreeViewGroups if it is not a postback, then for each item in the C1WebTreeViewItems enable the PopulateOnDemand property. Enter the following code:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
C1WebTreeView1.Items.Add(New C1WebTreeViewItem("Group A"))
C1WebTreeView1.Items.Add(New C1WebTreeViewItem("Group B"))
For Each item As C1WebTreeViewItem In C1WebTreeView1.Items
item.PopulateOnDemand = True
Next
End If
End Sub
· C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
C1WebTreeView1.Items.Add(new C1WebTreeViewItem("Group A"));
C1WebTreeView1.Items.Add(new C1WebTreeViewItem("Group B"));
}
foreach (C1WebTreeViewItem item in C1WebTreeView1.Items)
{
item.PopulateOnDemand = true;
}
}
· Delphi
procedure Page_Load(sender: System.Object; e: EventArgs)
var
i: Integer;
begin
if not Self.IsPostBack then
begin
C1WebTreeView1.Items.Add(C1WebTreeViewItem.Create('Group A'));
C1WebTreeView1.Items.Add(C1WebTreeViewItem.Create('Group B'));
end
for i := 0 to C1WebTreeView1.Items.Count - 1 do
item[i].PopulateOnDemand := true;
end;
4. In the Properties window select C1WebTreeView1, then click on the events icon. The events for C1WebTreeView1 appear in the Properties window.
5. Double-click the ItemPopulate event to create an event handler for the ItemPopulate event. In the C1WebTreeView1_ItemPopulate event procedure create a child group for the Static, Group A, and Group B items, then populate two new tree view items for each group. Enter the following code:
Protected Sub C1WebTreeView1_ItemPopulate(ByVal sender As Object, ByVal e As C1.Web.Command.C1WebCommandEventArgs) Handles C1WebTreeView1.ItemPopulate
Dim populatedItem As C1WebTreeViewItem = e.Item
populatedItem.CreateChildGroup()
populatedItem.ChildGroup.Items.Add(New C1WebTreeViewItem(populatedItem.Text + " - Item 1", "javascript:alert('You selected Item 1');"))
populatedItem.ChildGroup.Items.Add(New C1WebTreeViewItem(populatedItem.Text + " - Item 2", "javascript:alert('You selected Item 2');"))
End Sub
· C#
protected void C1WebTreeView1_ItemPopulate(object sender, C1.Web.Command.C1WebCommandEventArgs e)
{
C1WebTreeViewItem populatedItem = (C1WebTreeViewItem)e.Item;
populatedItem.CreateChildGroup();
populatedItem.ChildGroup.Items.Add(new C1WebTreeViewItem(populatedItem.Text + " - Item 1", "javascript:alert('You selected Item 1');"));
populatedItem.ChildGroup.Items.Add(new C1WebTreeViewItem(populatedItem.Text + " - Item 2", "javascript:alert('You selected Item 2');"));
}
· Delphi
procedure C1WebTreeView1_ItemPopulate(sender: System.Object; e: C1.Web.Command.C1WebCommandEventArgs)
var
populatedItem: C1WebTreeViewItem;
begin
populatedItem := C1WebTreeViewItem(e.Item);
populatedItem.CreateChildGroup();
populatedItem.ChildGroup.Items.Add(C1WebTreeViewItem.Create(populatedItem.Text + ' - Item 1', 'javascript:alert(''You selected Item 1'');'));
populatedItem.ChildGroup.Items.Add(C1WebTreeViewItem.Create(populatedItem.Text + ' - Item 2', 'javascript:alert(''You selected Item 2'');'));
end;
Run the program and observe the following:
· Click on the Static, Group A, or Group B node and two tree view items are populated. The AJAX feature PopulateOnDemand is triggered.
As a visual cue for the user an animated spinner 
appears as the items are
loading from the server to the client using callbacks. The animated spinner is
the default value for the CallbackWaitImageUrl. For more information
about how to use the CallbackWaitImageUrl property see Using
Visual Cues During a Callback.
Notice how callbacks prevent the page from flickering and also notice how quickly the items populate.
· Click on any of the sub tree view items and an alert box appears specifying which item you clicked. The alert box appears since we added javascript code to our C1WebTreeViewItems.
This concludes the tutorial.
Send comments about this topic to ComponentOne. Copyright © ComponentOne LLC. All rights reserved. |