Grid View

GRIDVIEW - NAVEGANDO SOBRE AS LINHAS DO GRIDVIEW USANDO O TECLADO
Quer aprender como navegar sobre as linhas do Gridview usando o teclado? Ento leia este artigo e veja como extremamente fcil!!!
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 navegao (Setas de direo e do teclado).
Vamos ento ao trabalho.
Crie um novo projeto web usando C# como Language.
Vamos usar a pgina Default.aspx. Nela adicione um controle Gridview.
Crie uma conexo com um banco de dados qualquer, de sua preferncia 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 concluda. Vamos agora criar duas funes JavaScript para manipular as linhas do Gridview.
Entre no Source da pgina Default.aspx e dentro da TAG <head> digite o seguinte cdigo javascript:
<head id="Head1" runat="server"> <title>Navegar com setas sobre o Gridview</title>
<script type="text/javascript">
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; } </script>
</head>
Bem, acredito que este cdigo dispensa comentrios at porque muito simples, e onde achei necessrio fiz comentrios diretamente no cdigo e tambm os nomes das funes so bem intuitivos, ento vamos em frente.
Aps construir estas duas funes vamos agora adicion-las ao Gridview quando em sua construo, para isso selecione o Gridview e crie, com um duplo clique sobre, o procediemento RowDataBoundatravs da janela Properties Events. Figura 2.
Figura 2 - RowDataBound
Acima deste evento crie uma varivel private, como segue:

private int _i = 0;
E dentro do evento vamos colocar o seguinte cdigo:
protected void GridView1_RowDataBound(object sender, GridViewRowE ventArgs 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 funo JavaScript MarkRow(). //Esta funo usada para marcar o ID da linha clicada. e.Row.Attributes.Add("onClick", "MarcarLinha(" + _i.ToString() + ");");
//Incrementa a valivel _i. _i++; }
Este cdigo tambm bem simples e est todo comentado, dispensando assim qualquer comentrio, 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 sero adicionados s linhas do Grid.
Concludo este passo vamos ento executar nossa aplicao.

Ao carregar sua aplicao no browse clique com o mouse em uma linha qualquer. Em seguida use as setas de navegao 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 aplicaes .NET.
Um grande abrao e at o prximo artigo....

Grid View

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Grid View

Загружено:

Авторское право:

Доступные форматы

GRIDVIEW - NAVEGANDO SOBRE AS LINHAS DO GRIDVIEW USANDO O TECLADO

Vamos ento ao trabalho.

Crie um novo projeto web usando C# como Language.

Vamos usar a pgina Default.aspx. Nela adicione um controle Gridview.

Figura 1 Gridview com Registros de um Database

<head id="Head1" runat="server"> <title>Navegar com setas sobre o Gridview</title>

var currentRowId = 0; function NavegarComTeclado() { if (event.keyCode == 40)

MarcarLinha(currentRowId+1); else if (event.keyCode == 38) MarcarLinha(currentRowId-1); }

Acima deste evento crie uma varivel private, como segue:

E dentro do evento vamos colocar o seguinte cdigo:

protected void GridView1_RowDataBound(object sender, GridViewRowE ventArgs e) {

//Incrementa a valivel _i. _i++; }

Concludo este passo vamos ento executar nossa aplicao.

Figura 3 Navegando sobre as linhas do Gridview usando o teclado

Um grande abrao e at o prximo artigo....

Вам также может понравиться