Linha do GridView (colorindo ao passar o mouse)

         Olá pessoal, meu nome é Maurício Júnior, autor de 4 livros, publico artigos em sites como www.juliobattisti.com.br, www.aspneti.com.br e www.mauriciojunior.org. Para cada exemplo falado, terá uma figura ilustrativa, fica mais fácil e simples a você acompanhar passo a passo.

 

 

 

Estou disposto a mostrar como utilizar ou colorir uma célula / linha do gridview quando passar o mouse por cima da mesma. É uma maneira fácil e simples de fazer, não tem segredo algum. Lembre-se que a forma de preencher o controle GridView, não mostrarei para que não fuja de meu objetivo maior que é passar o mouse em cima e o mesmo mudar a cor da linha.

 

         O componente GridView foi implementado na versão 2.0 do framework .NET junto com a tecnologia ASP.NET utilizando a IDE Visual Studio.NET 2005. Permite uma grande diversidade de customizações de códigos, controles, modelos, propriedades e desenvolvimento.

 

Recursos utilizados e necessários

 

- Framework 2.0;

- Visual Studio.NET 2005;

- Banco de dados SQL SERVER 2005 ou SQL EXPRESS 2005;

- Linguagem C#.NET.

 

Na prática

 

Partindo do pressuposto que já estou com o projeto WEB aberto, cliquei com o botão direito em cima do projeto e escolhi a opção “Add New Item...” mostrada pela IDE.  (Referência 1.1)

 

 

 

         Em seguida escolhi um novo template do tipo Web Form com a linguagem C#.NET. (Referência 1.2)

 

 

 

         Não se importe com o nome, coloque o nome que achar melhor. Depois do formulário pronto, ao lado esquerdo surgiu a barra de ferramenta chamada “ToolBox” onde possui o controle GridView. Cliquei e arrastei para página na parte SOURCE do ASPX.

 

         Em seguida, fui para o modo DESIGN, cliquei em cima do GridView e acionei a tecla F4. Escolhi a opção EVENTS da tela de PROPERTIES e por final cliquei na opção ROWDATABOUND duas vezes com o mouse.

 

         Dentro do método adicionei o código da referência (1.3).

 

protected void gridView_RowDataBound(object sender, GridViewRowEventArgs e)     {         if (e.Row.RowType == DataControlRowType.DataRow)         {             e.Row.Attributes.Add("onMouseOver", "this.style.backgroundColor='#ffff00'; this.style.cursor='hand';");             e.Row.Attributes.Add("onMouseOut", "this.style.backgroundColor='#ffffff'");         }     }

Referência: 1.3

 

Explicação:

 

         Note que pergunto primeiramente se o tipo da linha é igual ao dado da linha. Caso for, adiciono os atributos “onMouseOver” e “onMouseOut”.

 

e.Row.Attributes.Add("onMouseOver", "this.style.backgroundColor='#ffff00'; this.style.cursor='hand';");

Referência: 1.4

 

         O atributo “onMouseOver” é responsável pelo evento quando o usuário passa o mouse em cima da linha do gridView, ou seja, ao passar o mouse coloquei o estilo para mudar de cor “#FFFF00”. Este código de cor é amarelo. Em seguida coloquei um ponto e vírgula e adicionei outro estilo do tipo cursor para ser alterado para link. CURSOR=HAND.

 

         O atributo “onMouseOut” é responsável pelo evento quando o usuário tirar o mouse de cima da linha do gridView, ou seja, deve-se voltar ao normal e com a cor branca indicando que o mouse saiu da linha.

 

e.Row.Attributes.Add("onMouseOut", "this.style.backgroundColor='#ffffff'");

Referência: 1.5

 

Veja em funcionamento.

 

 

 

         Iniciei o projeto e foi carregado os dados no gridView. Ao passar o mouse automaticamente foi adicionada a cor na linha inteira. (Referência 1.7)

 

 

 

 

 

 

         Ao tirar o mouse a linha automaticamente fica branca colocando em funcionamento o “onMouseOut”.

 

         Bom, espero ter ajudado de alguma forma, qualquer dúvida favor entrar em contato através do e-mail mauricio@aspneti.com.

 

 

Mauricio Junior

www.aspneti.com

www.mauriciojunior.org