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.

Livros publicados.

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)

Referência: 1.1

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

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