To configure the third group of items for C1WebTreeView at design-time, complete the following steps:

1.   Right-click on the first C1WebTreeViewGroup and select Add Child from its context menu, and then set the new tree item's properties to the following:

Text = Europe

NavigateUrl = http://news.bbc.co.uk/2/hi/europe/default.stm

PopulateOnDemand = True

2.   Add five child items to Europe. For more information on adding child items see Adding C1WebTreeView Groups.

3.   Set the first, second, third, fourth, and fifth item's properties in the third C1WebTreeViewGroup to the following:

 

Tree Items	Property Settings
First Item	Text = German rescuers race against time NavigateUrl = http://news.bbc.co.uk/2/hi/europe/4577310.stm Tooltip = Rescuers battle to find survivors as a collapsed German ice rink threatens to cave in completely. WrapText = False
Second Item	Text = EU seeks to solve Russia gas row NavigateUrl = http://news.bbc.co.uk/2/hi/europe/4576534.stm Tooltip = The EU urges Russia and Ukraine to resolve a row over gas prices, which has disrupted supplies. WrapText = False
Third Item	Text = International caviar trade banned NavigateUrl = http://news.bbc.co.uk/2/hi/business/4577100.stm Tooltip = The global trade in caviar and other products made from the wild, endangered sturgeon fish is banned. WrapText = False
Fourth Item	Text = Wintry discontent NavigateUrl = http://news.bbc.co.uk/2/hi/europe/4576370.stm Tooltip = Ukrainians worry over winter amid Russian gas crisis. WrapText = False
Fifth Item	Text = Mozart magic NavigateUrl = http://news.bbc.co.uk/2/hi/entertainment/4570012.stm Tooltip = Austria plans lavish events for Mozart's 250th birthday. WrapText = False

The third C1WebTreeViewGroup appears like the following:

Run the Program and Observe the following:

·      Click on the New folder to expand/open it, and then click on the Africa folder to expand the tree items in Africa. 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 C1WebTreeView.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.

·      The PopulateOnDemand feature applies for the remaining two groups, Americas and Europe.

·      Go back to the designer and set the PopulateOnDemand property to False for the Africa item, then run the program, and then click on the Africa item. The default spinner does not appear since Ajax is not enabled.

·      Click on any of groups or child items in the News tree view. Notice how a new Web page opens. This is because we assigned a unique url link to each tree view item's C1WebLinkItem.NavigateUrl property.

·      Hover your mouse over any of the child tree items in the tree groups and notice the tooltip text is displayed. This is because we assigned the ToolTip property to each of the child items.

This concludes the tutorial.