Skip Navigation Links



Translate this page now :



»Programação
»Programação.NET
»Banco de Dados
»Webdesign
»Office
» Certificações Microsoft 4
»Treinamentos4
»Programação 4
»Webdesign«
»Office & User Tips«
»Grupos de UsuĆ”rios
»CĆ©lulas AcadĆŖmicas«
intcontpiada : 118
O melhor teclado da microsoft
Você já está cadastrado e participa do grupo de usuários de sua cidade ? Se não, comente o porque.
 
 
FaƧa um pequeno teste com 10 questƵes de VB
.:.
Teste seus conhecimentos em Visual Basic, SQL Server e ASP 3.0 com nossas provas on-line
.:.
Aprimore seus conhecimentos em programaĆ§Ć£o com nosso treinamento on-line de lĆ³gica de programaĆ§Ć£o
.:.
Veja nosso calendƔrio de treinamentos
Gostou da PƔgina?
Então

para um amigo!

Pesquisa personalizada
Pesquisar Dicas:

 







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).

  • Crie um novo site web
  • Adicione um SQLDataSource
  • Configure-o apontando para a tabela Customers
  • Adicione uma GridView
  • Configure o datasource como sendo o SQLDataSource1
  • Faça um auto-format na grid view
  • Habilite paginação, ordenação e seleção de registros

  • Crie outro SQLDataSource
  • Configure-o apontando para a tabela Orders
  • Ao selecionar a tabela Orders durante o wizard, clique no botão "Where"
  • Indique o campo de critério, customerid
  • Indique o tipo de origem da informação, "control"
  • Selecione o GridView1

    Aparecerá como opção o Gridview1.SelectedValue. Faça um Add para adicionar esse critério e complete o wizard

    A GridView identificou automaticamente a chave primária, CustomerID. Quando um registro for clicado, a propriedade selectedValue estará preenchida.

  • Adicione uma 2a GridView
  • Vincule essa 2a gridView com o SQLDataSource2
  • Faça um autoformat na nova gridView
  • Teste. Conforme clicar no link "Select" os registros filhos (As compras) serão exibidas.

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
MCAD,MCSD,MCSE,MCDBA





Envie seus comentįrios sobre este artigo

Nome :

E-mail :

Comentários :


Avise-me quando houverem novos comentįrios nesta pįgina

Veja abaixo os comentários já enviados :

Nome : Cassio E-Mail : psuporte@bol.com.br
Fiz exatamente o que esta escrito, mas quando clico no "+", não abre o detail....
Nome : isaque E-Mail : isaquefagner@hotmail.com
Muito claro e muito prático, acredito que não poderia ser melhor apresentado.
Para mim foi de grande proveito e auxílio, pois aprendi e aprimorei meu conhecimento com esse artigo.
Nome : Leandro Ribeiro E-Mail : leleribeiro@gmail.com
Artigo muito bom Dennes, me ajudou a ter algumas idéias. A partir dele vou tentar extrair uma maneira mais rapida de renderizar, pois dependendo da quantidade de registros vai ficar brabu!
Parabéns pelo trabalho.
[]'s
Nome : Jackson Arlysson E-Mail : jacksonarlysson@gmail.com
Muito bom, porém não utilizo sqldatasource e nem nenhum codigo gerado pelo VS2005, utilizo o DataTable para popular os dados, daí nao sei como fazer
Nome : Celso Marigo E-Mail : cm.junior@gmail.com
Bom dia!

To co mo mesmo problema do Cassio...

Não abre os detalhes clicando no +...

Nome : Zeta E-Mail : 041208@walla.com
Ótimo Artigo!!

Existe uma outra forma de fazer, bem mais fácil.
É so trabalhar com html dentro do gridview.
Quem quiser o código mande um email para 041208@walla.com.

Falows
Nome : Marcelo E-Mail : mesqt@unibanco.com.br
Dennes,

Excelente artigo!

É possivel abrir mais de um nivel com o GridView? Se sim, vc poderia passar um exemplo?

Grato,
Marcelo

Nome : Papayzs E-Mail : Papayme@mail.com
Thank you.
Nome : Papayli E-Mail : Papaylq@mail.com
Thank you!
Nome : Papayml E-Mail : Papaydt@mail.com
Thank you!
Nome : Gabriel Moreira E-Mail : newbie_x11@yahoo.com.br
No caso de quem usa DataTable [meu caso] não rola a passagem de parametrôs, vai ter que fazer isso na unha.
Nome : geovani E-Mail : geovaniflag@hotmail.com
Amigo, você poderia me enviar o código fonte deste exemplo ?

Desde já agradeço,

Geovani
Nome : geovani E-Mail : geovaniflag@hotmail.com
Amigo, você poderia me enviar o código fonte deste exemplo ?

Desde já agradeço,

Geovani
Nome : geovani E-Mail : geovaniflag@hotmail.com
Amigo, você poderia me enviar o código fonte deste exemplo ?

Desde já agradeço,

Geovani
Nome : geovani E-Mail : geovaniflag@hotmail.com
Amigo, você poderia me enviar o código fonte deste exemplo ?

Desde já agradeço,

Geovani
Nome : Gabriel Moreira E-Mail : gabrielsmoreira@yahoo.com.br
eu parei de usar DataSource e digo que minha vida virou o inferno porque ele só processava o Click do botão de expandir após o RowDataBound, no final das contas usei Panel p/ esconder os atendimentos, vc carrega tudo depois usa visible false/true p/ fazer o swap. só não posso te enviar o código pq c não a empresa me demite e processa (tenso hein) mais qq coisa que eu possa ajudar é só avisar flw. boa sorte
Nome : Alfredo Oro E-Mail : rick_ouro@bol.com.br
Muito Bom!
Nome : Stela E-Mail : stelacobra@gmail.com
Obrigada Dennes, estou procurando esta orientação já faz um tempo. Queria fazer uma consulta e mostrar o resultado logo abaixo da célula. Pensei no Ajax - Accordion, mas estou começando e não tenho a menor idéia de como fazer. Então achei seu tutorial.
Fiz tudo e funcionou até chegar a parte de mostrar o resultado da Grid2 dentro da 1. Me perdi na parte de inserir o botão em diante. Alguém poderia detalhar mais como fazer ou enviar o código pra eu olhar?
Obrigada
Nome : Junior E-Mail : Junior_luiz@hotmail.com
Tenho a seguinte situação :
Tenho um gridview com os campos : matricula,nome,departamento,qtd total.
Tenho outro gridview(details) onde tenho os campos : vale,tarifa,qtd,valor
Gostaria de no details no campo qtd ser editável onde o usuário possa alterar o valor e gostaria de acrescentar um botão onde qdo clicado ele atualizaria o valor informado e colocasse o valor qtd do details no qtd do principal.
Nome : Luis Fernando E-Mail : luispasinotto@hotmail.com
Pessoal alguem tem esse código ai em C# ?
Nome : Leandro E-Mail : leofrib@hotmail.com
É possível o envio dos fontes por email ?
estou tentando fazer mas nao ta dando certo.

Obrigado desde já.

Leandro.
Nome : 1 E-Mail : 1
-1'
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : b8vs6XUVc5N9 E-Mail : 079epwun7oy@outlook.com
???? ?????:???? ?????? ?? ????? ?? ????? ???? ????? ??? ???? ?? ????? ? ???? ????????? ?? ????? ????? pdfFile pdfFile = new File( /sdcard/test.pdf ); if(pdfFile.exists()) { Uri path = Uri.fromFile(pdfFile); Intent pdfIntent = new Intent(Intent.ACTION_VIEW); pdfIntent.setDataAndType(path, application/pdf ); pdfIntent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(pdfIntent); }
Nome : ts87fhtT E-Mail : cezm8dmu@mail.com
I'm not easily impsersed. . . but that's impressing me! :)
Nome : cyTtrfZQV3cN E-Mail : cryoljf47o@mail.com
I think I could look for a month of Sunday's and not find such cute/neat stuff that you do, and to boot it jumps into your cart!!! What in the wo!?r!?!?dl!

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Conheça mais sobre o nosso site :

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::



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