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