Populating the TreeView Control from a Database 5

IndexChange Event

In this last example, there are two labels included. They will tell us the old and new indexes when a change occurs. To get the event, include the AutoPostBack="True" in the TreeView's definition. Next, create a SelectIndexChange Sub:

Private Sub TreeView1_SelectedIndexChange(ByVal sender As Object, ByVal e As Microsoft.Web.UI.WebControls.TreeViewSelectEventArgs) Handles TreeView1.SelectedIndexChange
Label1.Text = e.OldNode.ToString
Label2.Text = e.NewNode.ToString
End Sub

First, Bigfoot Breweries was clicked. Next Sasquatch Ale was selected, giving the following Old and New strings

The Parent Child relation can be determined by the decimal. No decimal means a parent was selected, in our case, parent 1 (the TreeView is 0 based; Aux joyeux is 0, making Bigfoot 1). The child Ale is the first child (noted by number 0) of parent 1. If we had our third relation of Colors available under Sasquatch Ale, such as "Amber", "Dark", and Light", Amber would be 1.0.0, Dark would be 1.0.1, and Light would be 1.0.2.

Using the index together with the "nodeSupp.ID" will give you the table and ID of the item selected or checked.

There are also handy Expand and Collapse methods for controlling your tree's presentation.

Conclusion

The new TreeView WebControl is a quick way to give Web application a desktop look. The methods are easy and usually straightforward. Try to keep your trees small in size, or slow performance will be encountered. Custom images may be used rather than the standard Windows folder or checkbox picture. There are also several third party TreeView controls that offer additional methods and properties.

Page 1, Page 2, Page 3, Page 4, Page 5

Download / Print Complete PDF