Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

I wrote a blog post a while back before here that demonstrate how to highlight a GridView row on mouseover and as you can see its very easy to highlight rows in GridView. One of my colleague uses the same technique for implemeting gridview row highlighting but the problem is that if a Column has background color on it that cell will not be highlighted anymore. To make it more clear then let's build up a sample application.

ASPX:

 

   1:      <asp:GridView runat="server" id="GridView1" onrowcreated="GridView1_RowCreated" 
   2:          onrowdatabound="GridView1_RowDataBound">
   3:      </asp:GridView>

 

CODE BEHIND:

 

   1:  private DataTable FillData() {
   2:   
   3:              DataTable dt = new DataTable();
   4:              DataRow dr = null;
   5:   
   6:              //Create DataTable columns
   7:              dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
   8:              dt.Columns.Add(new DataColumn("Col1", typeof(string)));
   9:              dt.Columns.Add(new DataColumn("Col2", typeof(string)));
  10:              dt.Columns.Add(new DataColumn("Col3", typeof(string)));
  11:   
  12:              //Create Row for each columns
  13:              dr = dt.NewRow();
  14:              dr["RowNumber"] = 1;
  15:              dr["Col1"] = "A";
  16:              dr["Col2"] = "B";
  17:              dr["Col3"] = "C";
  18:              dt.Rows.Add(dr);
  19:   
  20:              dr = dt.NewRow();
  21:              dr["RowNumber"] = 2;
  22:              dr["Col1"] = "AA";
  23:              dr["Col2"] = "BB";
  24:              dr["Col3"] = "CC";
  25:              dt.Rows.Add(dr);
  26:   
  27:              dr = dt.NewRow();
  28:              dr["RowNumber"] = 3;
  29:              dr["Col1"] = "A";
  30:              dr["Col2"] = "B";
  31:              dr["Col3"] = "CC";
  32:              dt.Rows.Add(dr);
  33:   
  34:              dr = dt.NewRow();
  35:              dr["RowNumber"] = 4;
  36:              dr["Col1"] = "A";
  37:              dr["Col2"] = "B";
  38:              dr["Col3"] = "CC";
  39:              dt.Rows.Add(dr);
  40:   
  41:              dr = dt.NewRow();
  42:              dr["RowNumber"] = 5;
  43:              dr["Col1"] = "A";
  44:              dr["Col2"] = "B";
  45:              dr["Col3"] = "CC";
  46:              dt.Rows.Add(dr);
  47:   
  48:              return dt;
  49:  }
  50:   
  51:  protected void Page_Load(object sender, EventArgs e) {
  52:              if (!IsPostBack) {
  53:                  GridView1.DataSource = FillData();
  54:                  GridView1.DataBind();
  55:              }
  56:  }

 

As you can see there's nothing fancy in the code above. It just contain a method that fills a DataTable with a dummy data on it. Now here's the code for row highlighting:

 

   1:  protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) {
   2:              //Set Background Color for Columns 1 and 3
   3:              e.Row.Cells[1].BackColor = System.Drawing.Color.Beige;
   4:              e.Row.Cells[3].BackColor = System.Drawing.Color.Red;
   5:   
   6:              //Attach onmouseover and onmouseout for row highlighting
   7:              e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Blue'");
   8:              e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=''");  
   9:  }

 

Running the code above will show something like this in the browser:

On initial load:

On mouseover of GridView row:

 

Noticed that Col1 and Col3 are not highlighted. Why? the reason is that Col1 and Col3 cells has background color set on it and we only highlight the rows (TR) and not the columns (TD) that's why on mouseover only the rows will be highlighted. To fix the issue we will create a javascript method that would remove the background color of the columns when highlighting a row and on mouseout set back the original color that is set on Col1 and Col3. Here are the codes below:

JavaScript

 

   1:  <script type="text/javascript">
   2:      function HighLightRow(rowIndex, colIndex,colIndex2, flag) {
   3:          var gv = document.getElementById("<%= GridView1.ClientID %>");
   4:          var selRow = gv.rows[rowIndex];
   5:          if (rowIndex > 0) {
   6:              if (flag == "sel") {
   7:                  gv.rows[rowIndex].style.backgroundColor = 'Blue';
   8:                  gv.rows[rowIndex].style.color = "White";
   9:                  gv.rows[rowIndex].cells[colIndex].style.backgroundColor = '';
  10:                  gv.rows[rowIndex].cells[colIndex2].style.backgroundColor = '';
  11:              }
  12:              else {
  13:                  gv.rows[rowIndex].style.backgroundColor = '';
  14:                  gv.rows[rowIndex].style.color = "Black";
  15:                  gv.rows[rowIndex].cells[colIndex].style.backgroundColor = 'Beige';
  16:                  gv.rows[rowIndex].cells[colIndex2].style.backgroundColor = 'Red';
  17:              }
  18:          }
  19:     }
  20:  </script>

 

The HighLightRow method is a javascript function that accepts four (4) parameters which are the rowIndex,colIndex,colIndex2 and the flag. The rowIndex is the current row index of the selected row in GridView. The colIndex is the index of Col1 and colIndex2 is the index of col3. We are passing these index because these columns has background color on it and we need to toggle its backgroundcolor when highlighting the row in GridView. Finally the flag is something that would determine if its selected or not. Now here's the code for calling the JavaScript function above.

 

 

   1:   protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) {
   2:   
   3:              //Set Background Color for Columns 1 and 3
   4:              e.Row.Cells[1].BackColor = System.Drawing.Color.Beige;
   5:              e.Row.Cells[3].BackColor = System.Drawing.Color.Red;
   6:   
   7:              //Attach onmouseover and onmouseout for row highlighting
   8:              //and call the HighLightRow method with the required parameters
   9:              int index = e.Row.RowIndex + 1;
  10:              e.Row.Attributes.Add("onmouseover", "HighLightRow(" + index + "," + 1 + "," + 3 + ",'sel')");
  11:              e.Row.Attributes.Add("onmouseout", "HighLightRow(" + index + "," + 1 + "," + 3 + ",'dsel')");
  12:     
  13:  }

 

Running the code above will display something like this:

On initial load:

 

On mouseover of GridView row:

 

That's it! I hope someone find this post useful!

Posted on Thursday, January 13, 2011 6:23 PM ASP.NET , JavaScript , C# , GridView | Back to top


Comments on this post: Highlight Row in GridView with Colored Columns

# re: Highlight Row in GridView with Colored Columns
Requesting Gravatar...
Nice! Just the ticket I was looking for.
Left by greg on May 07, 2011 12:25 AM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net