ASP.Net Gridview Mouse Over

Question

I have a gridview control as shown below

enter image description here

I want to change the background color of the grid view row for the same employee number. (i.e.) If I move the mouse over any employee number 1002, I want to change the background color for two rows (i.e.) serial number 2 and 3.

Regards

Anand Solomon · Answer

Thank u all for your valuable replies. It is not working on mouseover, it is working only on rowdatabound event. I want to change the background color of two rows (i.e. 2 and 3) if I move the mouse pointer over employee number 1002. Like this if I move the mouse pointer over employee number 1004, I want to change the background color of two rows (i.e. 5 and 6), If I move the mouse pointer over employee number 1 the background color has to change only for that row (i.e. 1). In general, If I have two rows of same employee number, it has to select both the two rows if I move the mouse pointer on any one of the row. Thanks

Navaneeth Krishnan · Answer

$("#ctl00_contentplaceholder1_GridView1 td:nth-child(2)").mouseover(function(){ // reset the bg color $("#ctl00_contentplaceholder1_GridView1 td:nth-child(2)").css("background-color", ""); //push all the values to the array var tdArray = []; $("#ctl00_contentplaceholder1_GridView1 td:nth-child(2)").each(function( index ) { tdArray.push($(this).text()) }); //get the current cell value var tdValue = $(this).text(); //find the occurrence var numOccurences = $.grep(tdArray, function (elem) { return elem === tdValue; }).length; //if occurence is more than 1, then we have same text in somewhere in the grid if(numOccurences > 1){ //loop through and set the color for the matching values $("#ctl00_contentplaceholder1_GridView1 td:nth-child(2)").each(function( index ) { if($(this).text() == tdValue){ $(this).css("background-color", "yellow"); } }); } });

Joginder Banger · Answer

Hi Anand Solomon, I believe you have any condition, which is want change the colour on mouse hover. protected void OnRowDataBound( object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { if (Result_Status == "pass" ) { e.Row.CssClass = "green" ; } else { e.Row.CssClass = "red" ; } } } with more information Note: Change the ColumnIndex value as per your requirement. protected void OnRowDataBound( object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { String statusVal = HttpUtility.HtmlDecode(e.Row.Cells[ColumnIndex].Text).Trim(); if (statusVal=="1" || statusVal=="2" ) { foreach (TableCell cell in e.Row.Cells) { cell.BackColor = Color.Yellow; } { if (statusVal == "" ) { foreach (TableCell cell in e.Row.Cells) { cell.BackColor = Color.Red; } { } } make a your own class just like that a:hover { background-color : gold; } Please let me know if any thing want my side. Thanks JSB

dhoni kholi · Answer

Hi Anand, Please check this site https://www.aspsnippets.com/Articles/How-to-change-GridView-Row-Color-on-Mouseover-in-ASPNet.aspx

ASP.Net Gridview Mouse Over

Answers (4)