The web interface is becoming more advanced...In this article Himanshu shows us a simple example of how to use the TreeView and TabStrip IE Web Controls with VB.NET.Treeview and Tabstrip controls are part of the Microsoft Internet Explorer Web Controls. In my last project I had implemented these two controls in our application. There is some help for these at Microsoft site that I didn't think was that helpful so here in this article I am showing my snippets of code to show how it works.

You can download the Internet Explorer Web Controls pack from http://msdn.microsoft.com/downloads/default.asp?url=/downloads/
samples/internet/asp_dot_net_servercontrols/webcontrols/default.asp.

TreeView Control

Once you've downloaded and installed IE Web Controls, create a new ASP.NET application and make sure the TreeView control is in the toolbox.

Add the treeview control to your aspx form and in HTML view it will look something like this:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="treeview.aspx.vb" Inherits="appname.treeview"%> 
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> 
<form id="Form2" method="post" runat="server"> 
     <iewc:treeview id="tvGroups" runat="server" Width="100%" BorderWidth="0px" Height="100%"></iewc:treeview> 
</form> 

So here a TreeView is created on your page and we will use "tvgroups" to refer it later.

Now the code behind page (Treeview.aspx.vb):

Imports Microsoft.Web.UI.WebControls 
Imports System.Data.SqlClient 
Public Class Treeview 
    Inherits System.Web.UI.Page 
    Protected WithEvents tvGroups As Microsoft.Web.UI.WebControls.TreeView 
    Dim connString = "your connection string for database" 
    Dim myConnection As New SqlConnection(connString) 
    Dim dtid, dtname As String 

Here I am building the tree view with the values from the database, so now the remaining code is working with DataSets, DataRows and DataTables. If you know how to use them it’ll be easy for you, if not then there’s plenty of documentation about how to use them.

The following code goes in the Page_Load event/method:

If Not Page.IsPostBack Then 
  Dim mysqladapter As New SqlDataAdapter() 
  Dim mydataset As New DataSet() 
  Dim pNode, pChild As TreeNode 
  Dim dttable As DataTable 
  Dim dtrow As DataRow 
  Dim countrow As Integer 
  Dim dtcolumn As DataColumn 
  mysqladapter = New SqlDataAdapter("Fetch_departments", myConnection) 
  mysqladapter.Fill(mydataset, "tbl_no_sales_days") 
  Dim myDataView As DataView = New DataView(mydataset.Tables("tbl_no_sales_days")) 
  myDataView.Sort = "departmentregionid" 
  countrow = myDataView.Count 
  pNode = New TreeNode() 
  pNode.Text = "ALL DEPARTMENTS" 
  pNode.NavigateUrl = "" 
  tvGroups.Nodes.Add(pNode) 
  For Each dttable In mydataset.Tables 
    For Each dtrow In dttable.Rows 
      dtid = dtrow(0) 
      dtname = dtrow(1) 
      pChild = New TreeNode() 
      pChild.NavigateUrl = "http://www.oxx.no" 
      pChild.Text = dtname 
      pChild.ID = dtid 
      pNode.Nodes.Add(pChild) 
    Next 
  Next 
End If 

In the code above "Fetch_departments" is a stored procedure which returns regions and departments.

The output will be something like this:

ALL DEPARTMENTS
--REGION1
-----DEPT1
-----DEPT2
-----DEPT3
--REGION2
-----DEPT1
-----DEPT2
-----DEPT3
...

TabStrip Control

Now let’s look at how to use the TabStrip control.

The code in the ASPX file is similar to the code for TreeView control, here it is:

<iewc:tabstrip id=mytabstrip accessKey="<%# Page %>" runat="server" Width="338px" Height="28px" AutoPostBack="True" TabSelectedStyle="background-color:#ffffff;color:#000000;" TabHoverStyle="background-color:#777777;" TabDefaultStyle="background-color:#668274;font-family:verdana;font-weight:bold;font-size:8pt;color:#ffffff;width:79;height:21;text-align:center;"> 
   <iewc:Tab Text="tab1"></iewc:Tab> 
   <iewc:Tab Text="tab2"></iewc:Tab> 
   <iewc:Tab Text="tab3"></iewc:Tab> 
   <iewc:Tab Text="tab4"></iewc:Tab> 
</iewc:tabstrip> 

The code above will create 4 tabs in the page. Now comes time to add functionality to these tabs.

The most common functionality which we have seen in something like this is that a user clicks different tabs and pages corresponding to the tabs are displayed to the user. I was trying to implement this TabStrip for similar functionality in my project but I was disappointed to see that there is not property or method like Treenode.NavigateUrl. So I created an iframe in the page like this:

<iframe id=applnname style="WIDTH: 100.33%; HEIGHT: 175.81%" hspace=0 vspace=0 src="<%=sIFrameSrc%>" frameBorder=no height="100%"> 
</iframe> 

This src="<%=sIFrameSrc%>" is important as in the code behind page we will populate frame source so that we can get required functionality of switching between different pages.

When you click on different tabs mytabstrip_onSelectedIndexChange is called so this is the place where we can change srcframe to different pages.

Private Sub mytabstrip_onSelectedIndexChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles mytabstrip.SelectedIndexChange 
  Dim sdata As String 
  Select Case mytabstrip.SelectedIndex 
    Case 0 
      tabname = "tab1" 
      sIFrameSrc = "http://www.oxx.no" 
    Case 1 
      tabname = "tab2" 
      sIFrameSrc = "http://www.yahoo.co," 
    Case 2 
      tabname = "tab3" 
      sIFrameSrc = "your choice" 
    Case Else 
      sIFrameSrc = "http://www.oxx.no" 
  End Select 
End Sub 

You should now be able to set up a working TabStrip on your page. The code I have provided is very simple but these controls can be utilized in many applications.

So, there you have it, an introduction to the TreeView and TabStrip controls. Happy coding!  

By Himanshu Dhami
Source: devarticles.com