Olá pessoal,
Aqui estou com mais um artigo para o portal DevMedia. Neste artigo vou mostrar como navegar sobre os registros de um Gridview usando as teclas de navegação (Setas de direção á e â do teclado).
Vamos então ao trabalho.
Crie um novo projeto web usando C# como Language.
Vamos usar a página Default.aspx. Nela adicione um controle Gridview.
Crie uma conexão com um banco de dados qualquer, de sua preferência apenas para preencher o grid com dados e assim construirmos nosso exemplo.
Estou usando o SQL Server 2005, veja na figura 1 como ficou meu grid.
Figura 1 – Gridview com Registros de um Database
Perfeito, nossa primeira tarefa está concluída. Vamos agora criar duas funções JavaScript para manipular as linhas do Gridview.
Entre no Source da página Default.aspx e dentro da TAG digite o seguinte código javascript:
Navegar com setas sobre o Gridview
var currentRowId = 0;
function NavegarComTeclado()
{
if (event.keyCode == 40)
MarcarLinha(currentRowId+1);
else if (event.keyCode == 38)
MarcarLinha(currentRowId-1);
}
function MarcarLinha(rowId)
{
if (document.getElementById(rowId) == null)
return;
if (document.getElementById(currentRowId) != null )
// Retorna a primeira alinha do Grid quando clicar.
document.getElementById(currentRowId).style.backgroundColor = white;
currentRowId = rowId;
//Muda a cor da linha atualmente selecionada...
document.getElementById(rowId).style.backgroundColor = blue;
}
Bem, acredito que este código dispensa comentários até porque é muito simples, e onde achei necessário fiz comentários diretamente no código e também os nomes das funções são bem intuitivos, então vamos em frente.
Após construir estas duas funções vamos agora adicioná-las ao Gridview quando em sua construção, para isso selecione o Gridview e crie, com um duplo clique sobre, o procediemento RowDataBound através da janela Properties – Events. Figura 2.
Figura 2 - RowDataBound
Acima deste evento crie uma variável private, como segue:
private
int _i = 0;E dentro do evento vamos colocar o seguinte código:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
if (e.Row.RowType == DataControlRowType.DataRow)
{
//Adicona o Atributo ID com o valor de _i
//A primeira vez é igual a 0(zero).
e.Row.Attributes.Add("id", _i.ToString());
//Adiciona o atribute de onKeyDown pra ver qual seta foi pressionada.
Se [para cima] ou [para baixo].
e.Row.Attributes.Add("onKeyDown", "NavegarComTeclado();");
//Adiciona onClick com o valor de _i passado como paramentro
para função JavaScript MarkRow().
//Esta função é usada para marcar o ID da linha clicada.
e.Row.Attributes.Add("onClick", "MarcarLinha(" + _i.ToString() + ");");
//Incrementa a valiável _i.
_i++;
}
}
Este código também é bem simples e está todo comentado, dispensando assim qualquer comentário, o que vale destacar é que pra cada linha criada no Grid é feito um teste para verificar se o tipo da linha é “Linha” (DataControlRowType.DataRow). Sendo verdadeiro este teste ele adiciona os atributos a esta linha, ou seja, estes atributos somente serão adicionados às linhas do Grid.
Concluído este passo vamos então executar nossa aplicação.
Ao carregar sua aplicação no browse clique com o mouse em uma linha qualquer. Em seguida use as setas de navegação do teclado e veja o resultado. Figura 3.
Figura 3 – Navegando sobre as linhas do Gridview usando o teclado
Espero que apreciem mais este artigo e que com ele consigam personalizar ainda mais suas aplicações .NET.
Um grande abraço e até o próximo artigo....
Não se esqueçam de comentar os artigos por mim publicados!!!
