ASP.Net Gridview Mouse Over

Anand Solomon

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

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Anand Solomon6y ago
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
+1
Joginder Banger6y ago
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
0
Navaneeth Krishnan6y ago
$("#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");
         }
      });

   }
});
+1
dhoni kholi6y ago
Hi Anand,

Please check this site

https://www.aspsnippets.com/Articles/How-to-change-GridView-Row-Color-on-Mouseover-in-ASPNet.aspx
0