TreeView Part 1 - Populating the New TreeView Control from a Hierarchical Database Table - Step 1 – Drag ‘n Drop
(Page 2 of 4 )
If you have the ability to left-click with a mouse and drag, you can install the TreeView Control. Not that you’d be able to do anything with it, but it would be installed…
Actually, to use the control, you will need to download and install the .Net 2.0 framework. At this point it’s in Beta 2. Although it’s optional, I fully recommend that you also download the Web Developer Express Edition, it is free right now as it’s in Beta 2 as well. You can download both here: http://lab.msdn.microsoft.com/express/vwd/default.aspx
So go ahead, install what you need, fire up the IDE, and create your blank web application. Now, just open the toolbox, from which you can simply drag the TreeView object onto your blank (or otherwise) web page. At this point, if you were to save and run the web application, you would see absolutely nothing, as we haven’t configured any options. So let’s do that now.
Switch to HTML/code view. You should see the following:
<asp:TreeView ID="TreeView1" Runat="Server"></asp:TreeView>
The first thing you want to do is to give it a meaningful name. Let’s call it "EmployeeList," which will aptly describe its function and purpose.
Some obvious functionality we want the TreeView to be able to perform is expanding and collapsing of child branches. To implement this is in our object, we need to do nothing at all; this functionality is already provided. By default these actions only occur when you click on the ‘+’ or ‘-’ buttons beside each node. Microsoft is doing their best to not constrain us to their design alone, so you have the option to override the default behavior. You would do this by modifying the SelectAction property of each node (item within the tree), set it to “Expand.” Then the behavior will be similar to Windows Explorer in Windows XP; you’ll see all child nodes when you select a single node.
Another fundamental piece of information that we’ll need to include for each TreeView is what exactly it needs to do when you click on a node. We do this at the object level, by modifying the OnSelectedNodeChanged property, which raises a SelectedNodeChanged event. You would want to point it to a method that will take the selected node value and do something with it. In this case, we’ll have a method called "GetEmployeeInfo," which will coincidentally enough get the information for the employee you select.
So now our TreeView is looking like this:
<asp:TreeView ID="EmployeeList" Runat="Server" OnSelectedNodeChanged="GetEmployeeInfo"></asp:TreeView>
Now if you need to, you can begin modifying the visual aspects of the TreeView. It would be helpful to make the selected node stand out from the rest, and here’s one way to do that:
<SelectedNodeStyle BackColor="#CCC" />
You also have the option to change the default image set. This will replace the standard plus and minus symbols beside each node. You can use any one of a pre-defined, very ‘Microsoft-esque’ set of icons (from MSN to Windows Explorer to Outlook), or you can define your own custom set of icons. You can also implement checkboxes with each node to enable the selection of multiple items. This would be handy for product lists and such. For the sake of simplicity in this article, I’ll stick with the default images, and no textboxes. So you should have the following code on your aspx page:
<asp:TreeView ID="EmployeeList" Runat="Server" OnSelectedNodeChanged="SelectEmployee">
<SelectedNodeStyle BackColor="#CCC" />
</asp:TreeView>
Also, make sure you have created an empty method called SelectEmployee in your code-behind file, to prevent a compile error. It will look like this:
void SelectEmployee(object s, EventArgs e)
{
// do stuff
}
Now run your web page. You should get no errors, but you’ll also see absolutely nothing. This is because we haven’t populated the tree yet. Let’s do that now.
Next: Step 2 - Populating the Data >>
More Database Articles
More By Justin Cook
/ 26 
