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!
