GridView: Agrupamento com TemplateField

Olá pessoal, neste artigo irei mostrar como agrupar os dados do GridView usando o TemplateField, editor de Templates próprio do Visual Studio. Acompanhem:

Como dito anteriormente, iremos fazer o agrupamento do GridView, sendo que teremos 1 campo que será o grupo, contendo os campos do 2º GridView.

Para este artigo, usei o banco de exemplo da Microsoft, Northwind. Para quem quiser baixá-lo, é só seguir as instruções neste link ou neste artigo.

Iremos fazer uma listagem de Categoria e, a para cada categoria, teremos os respectivos Produtos agrupados.

Abra o Visual Studio, vá em File > New Project (CTRL + SHIFT + N), escolha o template ASP.NET Web Application, dê o nome AgrupamentoGridView e clique em OK.

Neste exemplo iremos fazer duas consultas ao banco, pode não ser o mais indicado para sua aplicação o fato de ter que consultar o banco duas vezes, pois pode atrapalhar o desempenho da mesma.

Arraste um GridView para a Default.aspx, clique na SmartTag, altere o formato dele e clique em Choose Data Source: e em New data source..., para fazermos a conexão com o banco de dados NorthWind.

OBS: Não entrarei em detalhes sobre a conexão com o banco, pois esse não é o intuito do artigo, já que em outro artigo abordo este assunto com mais detalhes.

Nesta 1ª consulta ao banco iremos retornar o ID e o Nome da Categoria, então na janela que pede para você configurar a instrução de Select, escolha a tabela Categories e as colunas CategoryID e CategoryName, como a imagem abaixo nos mostra:

Na próxima janela clique em Test Query, sua consulta deverá retornar oito categorias. Clique em Finish e aguarde.

Volte a SmartTag de nosso GridView e clique em Edit Columns. Na janela que se abre, em Selected fields, clique em CategoryName e o remova clicando no X ao lado, clique em CategoryID, e o converta para TemplateField clicando no lado direito em Convert this field into a TemplateField:

Agora nosso ID é um TemplateField e podemos editá-lo adicionando os controles que precisarmos.

Ainda na SmartTag clique em Edit Templates e, no editor de templates que se abre, adicione um Label, que será o Nome da Categoria (por isso o excluímos anteriormente no Edit Columns). Agora deixe este Label como negrito para que o mesmo seja destacado, e clique em Edit DataBindings, para o relacionarmos ao Nome da Categoria:

Agora arraste abaixo dos Labels um GridView que nos retornará os Produtos relativos à respectiva categoria. Crie outra conexão com o banco NorthWind nesse novo GridView e altere o Select Statement para o de baixo:

Temos que fazer a vinculação do Produto com a Categoria. Para isso, nesta mesma janela de cima, clique no botão WHERE... e altere os campos para o da imagem a seguir:

Desta forma fizemos um filtro onde o ID da categoria for igual ao controle que contém o ID da categoria, que no nosso exemplo é o Label1. Assim retornamos os Produtos relacionados com a Categoria respectiva.

Clique em Add, OK, Next e Finish.

Adicione uma Tabela (menu Table > Insert Table) em nosso TemplateField, com 3 colunas e 1 linha, coloque os Labels e o GridView em cada coluna, apenas para deixarmos nosso exemplo mais organizado:

Salve o projeto, compile para testar e clique em OK para modificar o Web.Config, permitindo assim a compilação do projeto. Se tudo correu bem, veremos os Produtos das respectivas Categorias:

Mais como podemos ter certeza que o ID dos Produtos apresentados são os mesmos do ID da Categoria ao qual ela se relaciona? Temos que alterar o Select Statement de nosso GridView de Produtos. Para isso, clique na SmartTag desse GridView e clique em Configure DataSource.

Clique duas vezes em Next para chegarmos a tela onde podemos alterar a query que nos retorna os Produtos. Altere esta query para a da imagem a seguir:

Assim apenas adicionamos em nosso SELECT o ID da Categoria.

Clique em Next e em Finish, irá aparecer uma mensagem perguntando se você deseja que o Visual Studio gere novamente as colunas do GridView, clique em Não. Agora vá a SmartTag do GridView e clique em Add New Column, e adicione a coluna referente ao ID da Categoria, como abaixo:

Salve o projeto e o compile novamente, você verá que o ID de cada Produto é o mesmo que o ID da Categoria.

Assim finalizo o artigo.

Para quem se interessar, disponibilizo o código fonte desse projeto aqui.

 Até o próximo artigo!