Faltam -1 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

Introdução

Ao decorrer desta matéria, utilizaremos o controle WebControl TreeView, que vem junto com o pacote IE WebControl que podemos baixar clicando aqui.

O exemplo abaixo acessa uma base de dados agrupando o resultado e adicionando ao ListView. O segredo desse componente é adicionar os Nodes. Que são os itens. Então tenha sempre a preocupação de quando adicionar um Node, este Node tem que ser adicionado em um local na arvore.

TreeView com banco de dados:

Insira um webform e adicione um componente TreeView

Adicionando Treeview:

Inserido procedimento Page_Load  

Private Sub Page_Load( ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase .Load
If Not Me .Page.IsPostBack Then
'Procedimento para Carregar Treeview
Me .CarregaTreeView()
End If
End Sub

Inserido procedimento para carregar TreeView

'
'Aqui está o codigo para carregarTreeview
Sub CarregaTreeView()
Dim strQuery As System.Text.StringBuilder
Dim strCategoria As String = ""
Dim dtProdutos As DataTable
strQuery.Append("select P.ProductID,ProductName,C.CategoryName from Products P,Categories C ")
strQuery.Append("where P.CategoryID=C.CategoryID ")
strQuery.Append("order by C.CategoryName,P.ProductName asc ")
dtProdutos = Me .ExecutaQuery(strQuery.ToString)
TreeView1.Nodes.Clear() ' Limpando Treeview
TreeView1.ExpandLevel = 1 ' Expandindo
Dim Node As New TreeNode ' Inicializando Node
Dim i As Int32 = 0 ' Variavel para loop

'//////////////////////////////////////////////////////////////////
'//// Adicionando Node Raiz
'//////////////////////////////////////////////////////////////////

Node.ImageUrl = "imagestree/xpMyComp.gif" ' Normal
Node.ExpandedImageUrl = "imagestree/xpMyComp.gif" ' Expandido
Node.Text = "Produtos"
TreeView1.Nodes.AddAt(0, Node) ' Adicionando 

'////////////////////////////////////////////////////////////////////////////
'// Adicionando nodes
'// O Código abaixo realiza loop pelo DataTable e Agrupa
'////////////////////////////////////////////////////////////////////////////

Try
For i = 0 To dtProdutos.Rows.Count - 1
If Not strCategoria.Equals(dtProdutos.Rows(i)(2)) Then
'Node Pai Produtos
strCategoria = Convert.ToString(dtProdutos.Rows(i)(2))
Node = New TreeNode
Node.ImageUrl = "imagestree/xpPanel.gif" ' Image
Node.ExpandedImageUrl = "imagestree/xpPanel.gif"
Node.Text = strCategoria ' Descricao
TreeView1.Nodes(0).Nodes.Add(Node) ' Adicionando 

'Node Produtos_Filho

Node = New TreeNode
Node.ImageUrl = "imagestree/person.gif"
Node.ExpandedImageUrl = "imagestree/person.gif"
Node.Text = Convert.ToString(dtProdutos.Rows(i)(1))
Node.NavigateUrl = "produtos.aspx?id=" + Convert.ToString(dtProdutos.Rows(i)(0))
Node.Target = "_TOP"
TreeView1.Nodes(0).Nodes(TreeView1.Nodes(0).Nodes.Count - 1).Nodes.Add(Node)

Else

'Node Produtos_Filho

Node = New TreeNode
Node.ImageUrl = "imagestree/person.gif"
Node.ExpandedImageUrl = "imagestree/person.gif"
Node.Text = Convert.ToString(dtProdutos.Rows(i)(1))
Node.NavigateUrl = "produtos.aspx?id=" + Convert.ToString(dtProdutos.Rows(i)(0))
Node.Target = "_TOP"
TreeView1.Nodes(0).Nodes(TreeView1.Nodes(0).Nodes.Count - 1).Nodes.Add(Node)
End If
Next
Catch ex As Exception
Response.Write("Falha Treeview " + ex.Message.ToString)
End Try
End Sub

Inserido procedimento para consulta ao banco de dados

'Executa query no banco de dados e retorna DataTable
'Ajustar String de acesso banco de dados de acordo com necessidade
Private Function ExecutaQuery( ByVal query As String ) As DataTable
Dim conn As New SqlConnection("Data Source=127.0.0.1; Initial atalog=Northwind;UID=sa;Pwd=")
Dim da As New SqlDataAdapter(query, conn)
Dim dt As New DataTable
Try
da.Fill(dt) 
Catch ex As SqlException
Response.Write("Erro SQL" + ex.Message.ToString)
Catch ex As Exception
Response.Write("Erro Geral:" + ex.Message.ToString)
Finally
dt.Dispose()
da.Dispose()
conn.Dispose()
End Try
Return dt
End Function

Finalizando
Este é um ótimo componente e colocando boas imagens você conseguirá um bom resultado na sua aplicação. Para fazer download das imagens que utilizei. aqui .

O que você gostaria de ver? Aguardo seu comentário! Participe! Até próximo artigo!