O GridView é um dos componente mais utilizado dentro do desenvolvimento de aplicações, porém ele acaba tendo algumas limitações se compararmos com o grid do Windows Forms.
Por isso, tenho procurado postar dicas de como incrementar seu uso em nossas aplicações. Meus posts anteriores foram:
Criando um GridView com Barra de Rolagem e Cabeçalho Fixo
Calculando o Somatório de uma Coluna do GridView
A minha nova dica mostrará como criar um efeito de seleção nas linhas do GridView, ao passar o mouse.
Para isso precisaremos fazer o seguinte:
1 - Criar as funções Java Script que manipularão os efeitos de "selecionar" e "deselecionar" as linhas da grid.
<script type="text/javascript" language="javascript">
var corOriginal;
// Função de seleção da linha da grid
function selecionarLinha(item) {
// Armazenha a cor original da grid
corOriginal = item.style.backgroundColor;
// Atribui nova cor a linha
item.style.backgroundColor = "#3399FF";
}
// Função de deseleção da linha da grid
function deselecionarLinha(item) {
// Retorna a cor original a linha
item.style.backgroundColor = corOriginal;
}
</script>
2 - Agora precisamos atribuir as funções Java Script que criamos às linhas do GridView. Para isso precisaremos utilizar o evento "RowCreated" do GridView.
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{ if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "selecionarLinha(this);");
e.Row.Attributes.Add("onmouseout", "deselecionarLinha(this);");
}
}
Observe que utilizaremos o "onmouseover" para selecionar a linha e o evento "onmouseout" para deselecionar a linha.
Executamos o projeto e vereremos o resultado. Passe o mouse sobre a grid para ver o que acontece.
GridView com efeito de seleção
Espero que aproveitem essa dica! Vamos em frente!
Se inscrever