 |
||||||||
|
|
||||||||
|
||||||||
|
| ||||||||
|
||||||||
|
|
||||||||
|
|
||||||||
|
| ||||||||
| com exemplos em VB |
| Componente para deixar forms em Vb semelhantes às telas do winnamp |
| Componente para colocar sua aplicação VB no Systray |
| Componente para transformar sua aplicação VB em serviço |
| Ferramentas úteis para quem usa Olap Server |
 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Pesquisa personalizada
Exibindo dados Master/Details com a GridView A GridView do ASP.NET 2 realmente possui muitos recursos que podem ser utilizados até mesmo sem a necessidade de escrever linha de código alguma. Vamos ver até onde esses recursos podem nos levar na construção de uma exibição Master/Detail com a GridView. Para nosso exemplo vamos utilizar o banco northwind, em um SQL Server. Vamos utilizar as tabelas Customers e Orders, que se relacionam (cada cliente realizou várias compras).
Até aqui conseguimos fazer tudo isso sem nenhuma linha de código, muito fácil. Mas o efeito visual não fica legal. Seria melhor se tivessemos um ícone de + ao lado de cada linha e que, ao clicar neste ícone, a linha se abrisse e exibisse os registros filhos, da tabela Orders. Vamos inserir uma template column na GridView e, editando a template column, inserir um imageButton.
Então agora sim vamos precisar codificar. Como nosso ícone de + será uma espécie de Abrir/Fechar, poderão haver vários registros na grid com os details abertos, assim sendo a propriedade selectedValue não nos serve mais. Além disso precisaremos manter através dos postBacks da página a informação sobre quais itens estão abertos ou fechados. Vamos então criar uma propriedade e através dela manter um arraylist no viewstate, um arrayList contendo o código dos clientes cuja exibição dos detahes está habilitada. Veja como fica : 46 Public ReadOnly Property ItensAbertos() As ArrayList 47 Get 48 If IsNothing(ViewState("itensabertos")) Then 49 ViewState("itensabertos") = New ArrayList 50 End If 51 Return (ViewState("itensabertos")) 52 End Get 53 End Property Precisaremos programar o click do ImageButton para fazer a exibição da grid filho. Na verdade nosso imageButton apenas vai manipular o vetor, incluindo ou retirando elementos conforme o iten esteja sendo aberto ou fechado. No click do imageButton precisaremos saber qual o código do cliente. Podemos inserir essa informação como um atributo do HTML, na própria tag do ImageButton. Precisamos fazer isso pelo HTML, veja como fica : <asp:ImageButton ID="ImageButton1" idCliente="<%# eval("CustomerId") %>" Veja também o código do clique do botão : 106 Protected Sub ClicouItem(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) 107 108 109 If ItensAbertos.IndexOf(sender.attributes("idCliente")) <> -1 Then 110 111 112 sender.imageurl = "UpgradeReport_Plus.gif" 113 ItensAbertos.Remove(sender.attributes("idCliente")) 114 Else 115 sender.imageurl = "UpgradeReport_Minus.gif" 116 ItensAbertos.Add(sender.attributes("idCliente")) 117 End If 118 GridView1.DataBind() 119 End Sub O sqlDataSource2 estava com seu parâmetro vinculado com a propriedade selectedValue. Agora precisaremos deixa-lo sem vinculo, para preenche-lo pelo código. Refaça a configuração selecionando a opção "none" na hora de definir o vinculo do parâmetro e não fornecendo nenhum valor default.
Agora precisamos garantir que os itens da grid que estiverem no vetor serão exibidos com seus dados de detalhes. Para isso precisamos controlar a renderização de cada linha da grid. Na versão anterior isso era feito pelo evento itemDataBound, agora é feito pelo evento rowDataBound. No evento rowDataBound deveremos preencher o parâmetro do sqlDataSource2. Precisaremos alterar o layout da grid, deletando as colunas adicionais. Vamos deixar apenas a coluna com o imageButton e mais uma para os detalhes. Mas com isso os dados do cliente em si sumirão. Então precisamos, para manter os dados do cliente sendo exibidos corretamente, criar uma nova table dentro da 2a célula que mantivemos, célula esta que estará com um columnSpan que a fará ocupar o espaço equivalente a todas as demais. Assim sendo, criamos uma Table, adicionamos linha e duas colunas e inserimos os dados de clientes. Adicionamos isso aos controles da página, em seguida adicionando também um salto de linha. Por fim, criamos uma nova gridView, definimos o datasource como sendo o sqldataSource2 e inserimos a gridview dentro de nossa linha. Veja como fica o código : 55 Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound 56 57 58 If e.Row.RowType = DataControlRowType.DataRow Then 59 60 61 If ItensAbertos.IndexOf(e.Row.DataItem("customerid")) <> -1 Then 62 63 64 e.Row.Cells.RemoveAt(5) 65 e.Row.Cells.RemoveAt(4) 66 e.Row.Cells.RemoveAt(3) 67 e.Row.Cells.RemoveAt(2) 68 e.Row.Cells(1).ColumnSpan = 5 69 Dim tb As New Table 70 Dim tr As New TableRow 71 Dim tc As New TableCell 72 tb.Rows.Add(tr) 73 tr.Cells.Add(tc) 74 tc.Text = e.Row.DataItem("customerid") 75 76 tc = New TableCell 77 tc.Text = e.Row.DataItem("companyname") 78 79 tr.Cells.Add(tc) 80 tb.Width = New Unit(100, UnitType.Percentage) 81 tb.CellPadding = 0 82 tb.CellSpacing = 0 83 84 e.Row.Cells(1).Controls.Add(tb) 85 86 Dim gen As New HtmlGenericControl 87 gen.InnerHtml = "<br>" 88 e.Row.Cells(1).Controls.Add(gen) 89 90 SqlDataSource2.SelectParameters("customerid").DefaultValue = e.Row.DataItem("customerid") 91 92 93 Dim gr As New GridView 94 gr.DataSource = SqlDataSource2 95 e.Row.Cells(1).Controls.Add(gr) 96 gr.DataBind() 97 98 Dim img As ImageButton 99 img = e.Row.FindControl("img") 100 img.ImageUrl = "UpgradeReport_Minus.gif" 101 End If 102 End If 103 End Sub Pronto, está montada nossa gridView com os dados de detalhes sendo exibidos em seu interior.
Dennes Torres |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Veja abaixo os comentários já enviados :
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Quer
saber mais?
Faça um curso na Búfalo Informática, Treinamento e Consultoria e Prepare-se para o Mercado! Veja o que a Búfalo tem para você. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
� Búfalo Informática,
Treinamento e Consultoria -
Rua Álvaro Alvim, 37 Sala 920 - Cinelândia - Rio de Janeiro / RJ
Tel.: (21)2262-1368 (21) 9240-5134 (21) 9240-7281 e-Mail: contato@bufaloinfo.com.br
