ASP.NET / DataGrid – Tornando Linha sensível ao clique do mouse

Introdução

O DataGrid é realmente um componente muito interessante, com ele podemos fazer várias modificações. Tais como personalizar as colunas, modificar os dados das mesmas...

E porque não tornar uma linha sensível ao clique do mouse de forma que essa linha gere um evento no servidor via "PostBack".

Neste pequeno exemplo fiz essa implementação. Veja como foi fácil.

Insira um webform e um DataGrid(ID=dgGridjs), formate conforme o layout na Figura 01.

Figura 1 - Inserindo grid no webform

Tornando uma linha sensível ao clique do mouse

. Inserindo código no evento Page_Load para carregar o DataGrid e receber "PostBack":

Private  Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 
If Not Me.Page.IsPostBack Then
Me.dgGridjs.DataKeyField = "ProductID"
Me.CarregarGrid()
End If

"///////////////////////////////////////////////////////////////////////
"// Recebendo linha clicada no Grid //
"///////////////////////////////////////////////////////////////////////

If Me.Page.IsPostBack Then
Dim argumento As String = Request("__EVENTARGUMENT")
If Not IsNothing(argumento) And argumento.IndexOf("#LNPB#")> -1 Then
Dim strProduto, StrDescricao As String
Dim intItem As Int32

intItem = Int32.Parse(argumento.Remove(0, 6)) " Item do grid clicado
strProduto = Me.dgGridjs.DataKeys(intItem).ToString " ProductID
StrDescricao = Me.dgGridjs.Items(intItem).Cells(1).Text.ToString "ProductName
Response.Write("Produto:" + strProduto + "-" + StrDescricao)

End If
End If
End Sub

. Criando procedimento CarregaGrid()
(Ajuste a string de acesso ao banco de dados, este exemplo está usando o banco de dados Northwind que vem no pacote do SqlServer)

"Carregar os dados do banco de dados no DataGrid
Private Sub CarregarGrid() 

Dim conn As New SqlConnection("Data Source=127.0.0.1; Initial Catalog=Northwind;UID=sa;Pwd=")
Dim da As New SqlDataAdapter( _
	"SELECT top 10 ProductID, ProductName, UnitPrice from Products ", conn)
Dim dt As New DataTable

Try

da.Fill(dt)


With dgGridjs
.DataSource = dt
.DataMember = "Produtos"
.DataBind()
End With

Catch ex As SqlException
Response.Write("Erro SQL" + ex.Message.ToString)
Catch ex As Exception
Response.Write("Erro Geral:" + ex.Message.ToString)
Finally

dt.Dispose()
da.Dispose()
conn.Dispose()

End Try

End Sub

. Adicionando Código ao ItemCreated para alterar o Grid

Private Sub dgGridjs_ItemCreated( _
	ByVal sender As System.Object, _
	ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _
	Handles dgGridjs.ItemCreated 
If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor="#D7D8B8"")
e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor="white"")
"Adicionando JavaSCript para gerar _POSTBACK
e.Item.Attributes.Add("onclick", Page.GetPostBackEventReference(Me, "#LNPB#" + e.Item.ItemIndex.ToString))
"Linha comentada: Adicionando link
"e.Item.Attributes.Add("onclick", "javascript:location.href="detalha.aspx?ID=" + e.Item.Cells(0).Text + "";")
e.Item.Style("cursor") = "hand" " Cursor
End If

End Sub

Após adicionar o código, realize o teste e veja que ao encostar o mouse na linha a mesma vai mudar de cor, se clicar vai efetuar postback no servidor. Conforme Figura 02.

Figura 02 - Clicando na linha e gerando PostBack

Adicionando um ToolTip a coluna do DataGrid

Uma outra possibilidade seria adicionar um ToolTip a coluna, vamos modificar o código anterior e adicionar o código abaixo para termos o resultado da Figura 03.

Figura 03 - Adicionando ToolTip

. Alterando aspx(HTML)
Adicione o código abaixo ao <head> da pagina

<!--- Popup Addon -->
<STYLE type="text/css">
BODY {OVERFLOW-X: hidden; OVERFLOW: scroll}
.popper {VISIBILITY: hidden; POSITION: absolute}
</STYLE>
<!-- Fim Popup-->

Adicione o código abaixo logo depois do <body> do aspx

 
<!---------------- Popup Layer e JavaScript ------------------------->
<DIV class="popper" id="topdeck"></DIV>           
<SCRIPT> 
/* 
JavaScript original info: 
Pop up information box II 
By Mike McGrath (mike_mcgrath@lineone.net,  http://website.lineone.net/~mike_mcgrath) 
*/ 
var nav = (document.layers); 
var iex = (document.all); 
var skn = (nav) ? document.topdeck : topdeck.style; 
if (nav) document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = get_mouse; 

function pop(msg,bak,tit) 
{ 
var content ="<TABLE WIDTH=130 BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=#336666>";
content += "<TR><TD>";
content += "<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>";
content += "<TR><TD><CENTER>";
content += "<FONT COLOR=#FFFFFF Face="Verdana,Arial" SIZE=1>"+tit+"</FONT>";
content += "</CENTER></TD></TR></TABLE>";
content += "<TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 "; 
content += "BGCOLOR="+bak+"><TR><TD bgcolor="#FFFFFF"><FONT COLOR=#000000 ";
content += "face="Verdana, Arial" SIZE=1><CENTER>"+msg+"</CENTER>
content += "</FONT></TD></TR></TABLE>";
content += "</TD></TR></TABLE>"; 
  if (nav) 
  { 
    skn.document.write(content); 
        skn.document.close(); 
        skn.visibility = "visible"; 
  } 
    else if (iex) 
  { 
        document.all("topdeck").innerHTML = content; 
        skn.visibility = "visible";  
  } 
} 
function get_mouse(e) 
{ 
      var x = (nav) ? e.pageX : event.x+document.body.scrollLeft; 
      var y = (nav) ? e.pageY : event.y+document.body.scrollTop; 
      //skn.left = x - 60; 
  //skn.top  = y+20; 
  skn.top=y; 
  skn.left=x; 
} 
function kill() 
{ 
    skn.visibility = "hidden"; 
    document.all("topdeck").innerHTML=""; 
} 
</SCRIPT>

Agora no servidor localizemos novamente o evento itemCreated do DataGrid e modifique comentando as linhas anteriores e adicionando as novas que adicionam o código para modificar apenas a coluna colocando o javascript do Tooltip.

Private Sub dgGridjs_ItemCreated(ByVal sender As System.Object, ByVal e As _
 System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgGridjs.ItemCreated 
   If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then 
      "e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor="#D7D8B8"")               
      "e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor="white"")
      "Adicionando JavaSCript para gerar _POSTBACK
      "e.Item.Attributes.Add("onclick", Page.GetPostBackEventReference(Me, "#LNPB#" + 
      "e.Item.ItemIndex.ToString))
      "e.Item.Style("cursor") = "hand" " Cursor 
      "///////// JS Adiciona link /////// 

      "e.Item.Attributes.Add("onclick", "javascript:location.href="detalha.aspx?ID=" + 
      "e.Item.Cells(0).Text + "";") 
      "/////////// Adicionando javascrip para ToolTip na coluna 

	   e.Item.Cells(0).Attributes.Add("onmouseover", _
	   "this.style.backgroundColor="#D7D8B8"; _
	   pop("Está coluna informa o código do produto","#336666","Produtos");") 

	  e.Item.Cells(0).Attributes.Add("onmouseout", "this.style.backgroundColor="white";kill();") 

   End If 
End Sub

Dica:
Para testar esse exemplo, certifique que o webform é FlowLayout e no modo html remova a tag Style do DataGrid senão o Tip vai aparecer atras do DataGrid!
style="Z-INDEX: 101; LEFT: 24px; POSITION: absolute; TOP: 32px"

Finalizando

Neste exemplo observamos como fazer duas modificações no componente DataGrid para adicionar duas facilidades não disponíveis na versão original. Isso é apenas uma pequena demonstração do grande potencial desse componente.

O que você gostaria de ver sobre DataGrid. Aguardo seu comentário! Participe!!! Até próximo artigo!

Desenvolvimento - ASP. NET

ASP.NET / DataGrid – Tornando Linha sensível ao clique do mouse
O DataGrid é realmente um componente muito interessante, com ele podemos fazer varias modificações. Tais como personalizar as colunas, modificar os dados das mesmas...
por Ramon Durães

Leia também

Desenvolvimento - ASP. NET

ASP.NET / DataGrid – Tornando Linha sensível ao clique do mouseO DataGrid é realmente um componente muito interessante, com ele podemos fazer varias modificações. Tais como personalizar as colunas, modificar os dados das mesmas...por Ramon Durães

Leia também

ASP.NET / DataGrid – Tornando Linha sensível ao clique do mouse
O DataGrid é realmente um componente muito interessante, com ele podemos fazer varias modificações. Tais como personalizar as colunas, modificar os dados das mesmas...
por Ramon Durães