Highlight Row in GridView with Colored Columns
- by Vincent Maverick Durano
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!
