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
Veja em funcionamento.
ReferĂȘncia: 1.6
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)
ReferĂȘncia: 1.7
ReferĂȘncia: 1.8
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