GridView ed effetti OnMouseOver OnMouseOut

Ecco come con poche righe di codice si può modificare il background color delle righe di una GridView al passaggio del mouse (OnMouseOver quando il mouse entra nell'area di una row, OnMouseOut quando ne esce).

Per applicare questo effetto si devono settare gli attributi OnMouseOver e OnMouseOut per ogni singola row della grid, gestendo il tutto nell'evento RowDataBound.
Uno dei vantaggi di questo evento è che viene sollevato per ogni riga che compone la nostra grid, e nel parametro GridViewRowEventArgs (passato come argomento al gestore dell'evento) sono contenuti i metodi e le proprietà per accedere alle celle della riga in fase di rendering, permettendo così di leggere e modificare i dati della stessa a seconda delle occorrenze.

Ecco come gestire l'evento nel seguente modo:

protected void grdView_RowDataBound(object sender, GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
      e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#eee';");
      e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#C1D5DE';");
   }
} 

Nel caso lo style della grid richiedesse una differenziazione tra le row e le alternate row, il codice può essere esteso controllando il tipo della riga, andando a testare la proprietà RowType (che è presente nell'oggetto GridViewRowEventArgs).

protected void grdView_RowDataBound(object sender, GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
     e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#C1D5DE';");
     if (e.Row.RowState == (DataControlRowState.Normal))
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#eee';");

     if (e.Row.RowState == (DataControlRowState.Alternate))
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#fff';");
   }
} 

Questo sistema inoltre può venire esteso controllando gli altri stati delle row, oppure verificando il valore contenuto in una determinata cella (che ricordo è accessibile tramite il parametro GridViewRowEventArgs, es: e.Row.Cells[0].Text).

Commenti

• grazie x l'aiuto..cmq ho apportato una piccola correzione xke ho notato che restava colorata la prima riga della grid..quindi ho aggiunto un paio d isctruzioni:
  
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
  e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFCE89';");
  e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#ffffff';");
  
  if (e.Row.RowState == (DataControlRowState.Normal))
  {
  e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFCE89';");
  e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#ffffff';");
  }
  if (e.Row.RowState == (DataControlRowState.Alternate))
  {
  e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFCE89';");
  e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#F5f5f5';");
  }
  }
  
  ..spero d essere stato kiaro..ciau

  di Luca - 18/10/2007 5.18.33