Manipulando o GridView através do Evento RowDataBound – Parte 1

 

Olá esse é meu primeiro artigo aqui na DevMedia, e para a estréia vou usar como exemplo um dos maiores problemas que tive para iniciar com o Asp.Net, “Personalizar o Gridview”.

 

Um dos objetos mais usados quando trabalhamos com acesso à dados no Asp.net é o “Maravilhoso GridView”, mas quem nunca precisou de um nível maior de personalização e achou que o GridView não daria conta. Para isso teve que usar outra opção, algo como gerar uma Tabela HTML Dinâmica, ou usar até mesmo o Repeater.

 

Bom a minha tarefa aqui é mostrar para vocês até onde podem ir usando o (conforme citado acima) “Maravilhoso GridView”.

 

Neste primeiro exemplo vamos fazer um gridview que de acordo com o status retornado do meu banco de dados exibe uma imagem diferente.

 

Para isso crie o Gridview conforme o código abaixo:

 

 

Como vocês podem perceber eu fiz o meu GridView com 3 Colunas(Código, Nome, Status) utilizando os campos BoundField’s do próprio GridView.

 

Para Facilitar o entendimento do artigo eu usei uma Função que Retorna um DataTable estático com 3 registros apenas, mas isso fica a critério de vocês. Para quem quiser fazer exatamente igual ao meu exemplo, segue o código do DataTable abaixo:

 

 

Agora utilize uma das formatações padrões do Visual Studio para o seu GridView (Só lembrando o correto é você ter toda a formatação do  gridView em uma folha de estilos CSS), e no Evento Page_Load do arquivo .vb coloque o seguinte código

 

 

Execute a aplicação e você deverá ter algo parecido com o da imagem abaixo

 

 

Agora nossa tarefa será ao invés de exibir o numero no status 1, 2 e 3 Exibir uma das imagem abaixo

 

 

Ícone vermelho para status 1, ícone verde para status 2 e ícone azul para status 3.

 

Bom para isso vamos precisar fazer uma modificação no nosso GridView, voltando para a página .aspx vamos deixar o código do nosso gridview conforme o código a seguir

 

 

Como vocês podem perceber a única alteração realizada no GridView, foi a inserção de uma nova Coluna do Tipo TemplateField, Dentro dessa Coluna informamos qual o template a seguir dentro da Tag ItemTemplate.

 

Como podem perceber eu apenas coloquei uma Asp:Image sem informar a ImageUrl.

Então se vc rodar sua aplicação agora, ela irá exibir algo como a imagem abaixo, com as imagens quebradas.

 

 

Agora é onde entra a parte interessante do artigo o evento RowDataBound. Quando você Executa o Método DataBind do GridView ele passa uma vez pelo evento RowDataBound para cada linha retornada do DataTable.

 

Esse evento recebe um parâmetro chamado “e”, que é o segredo para poder manipular os dados dentro do GridView enquanto eles são carregados ainda no servidor. Se digitarmos dentro do evento “e.” e chamarmos o intellisense do Visual Studio veremos que a única opção avaliável é “Row” esse “Row” significa a linha atual que ele está inserindo no nosso GridView. Um cuidado que temos que tomar para manipular os dados do GridView durante esse evento é descobrir o tipo de linha que o evento está passando antes de darmos qualquer instrução para o compilador(O Grid é composto de vários tipos linhas, Header, Footer, Pager, Data, etc..).

 

 

Como no nosso caso vamos apenas manipular as linhas com os resultados, vamos usar o  DataControlRowType.DataRow” Caso seja esse o tipo da linha, vamos dizer para ele qual imagem utilizar no nosso controle imgIconeStatus. O Parametro que usaremos para saber qual imagem exibir esta dentro da coluna status. Para resgatar esse valor vamos usar uma variável do tipo Integer.

 

Cada linha do GridView por sua vez é composta de uma coleção de células, teremos que indicar para a aplicação qual célula está o resultado que desejamos. Contando da esquerda para a direita a partir do zero, a nossa célula é a de numero 2. (Código = 0, Nome = 1, Status = 3). Agora iremos converter o valor dessa célula para um inteiro, e assim definirmos qual imagem será a utilizada dentro da string.

 

 

Como o nosso gridview é preparado para renderizar muita cópias do mesmo template não podemos acessar a imagem dizendo apenas imgIconeStatus.ImageUrl, teremos que mapear uma nova instancia do objeto WebControls.Image e apontar para essa imagem. Parece difícil, mas não é.

 

Para isso iremos declarar uma nova váriável do tipo WebControls.Image e apontaremos ela para a imagem referente a linha do gridView utilizando uma função do asp.net chamada FindControl que recebe.

 

Como queremos apontar para a imagem existente na mesma a linha a qual o nosso RowDataBound está passando, usaremos a seguinte sintaxe e.row.FindControl(“imgIconeStatus”), Note que como parametro para o FindControls, passamos o ID do controle em forma de String, essa função server para mapear qualquer Controle Asp.Net

 
Agora apenas passaremos para ela a propriedade ImageUrl conforme código abaixo.

 

 

Agora podemos sumir com a célula que guarda o nosso status e adicionar o valor 2 no colspan da ultima coluna, para que a nossa Tabela HTML (Resultado Final do GridView Renderizado) não fique errada.

 

 

Agora o seu grid deve estar como o exemplo Abaixo:

 

 
Espero que tenham entendido qualquer duvida me mandem um e-mail no endereço abaixo.
 

Um abraço a todos e até a próxima

William Ferreira dos Santos

williamsantos@miradesign.com.br