Can't highlight row for dynamically created GridView from JavaScript

Question

It use to be easy to do this, but this was my first time generating the GridView dynamically. Each GridView cell has its own CSS Styling when created. In RowDataBound event I set up the highlighting as usual:

e.Row.Attributes.Add("onmouseover", "this.style.cursor='pointer';HilightRow(this);")
e.Row.Attributes.Add("onmouseout", "HilightRow(this);")

On the script side I have the following:

var curSelRow = null;
function HilightRow(row) {
    var selRow = row;
    var i;
        .
        .
    if (selRow != null) {
        curSelRow = selRow;
        curSelRow.style.backgroundColor = '#FFEEC2';
    }
}

I've traced this in the script and it works fine, there are no errors and when I do a watch on the row in question, it does correctly show the correct background color value (i.e. #FFEEC2), however, the hover does not change the color of the row. I'm puzzled. Not sure why this is happening and as I said, I've done this many times before without a problem but the gridviews were not dynamic in the past.

Shawn · Accepted Answer · 2011-06-14 19:14:26Z

0

I'm not sure if you've shown all your code, but it appears that both the over and out function are setting the same bgcolor (#FFEEC2).

Both onmouseover and onmouseout are calling HilightRow(this). Does the initial onmouseover set the bgcolor?

edited Jun 14, 2011 at 19:14

answered Jun 14, 2011 at 19:07

Shawn

1,9012 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user798287 Over a year ago

yes, the initial mouse over sets the color and copies the previous (not shown), but I never even get to that point since the initial color is never set with mouse-over.

Marko · Accepted Answer · 2011-06-17 18:02:35Z

0

A nicer solution I think is adding a class to the row. Like class="Hilightrow". And avoid script in the html-elements and separate structure from behaviour.

  var hiliclass = "Hilightrow";
    var trhilight = document.getElementById("mytable").getElementsByTagName("tr"); 
    var len = trhilight.length; 
    for(var i=0;i<len;i++) {
        if(trhilight[i].className == hiliclass) {
            trhilight[i].onmouseover = function() {
                  trhilight[i].style.backgroundColor = "red"; 
           }
           .... 

}

    }

And have the script inside a function and call it inside window.onload or use a self-invoking function like this:

 function highlightrows() {
   ..// my code 
   }();

edited Jun 17, 2011 at 18:02

answered Jun 17, 2011 at 17:55

Marko

11.1k17 gold badges74 silver badges94 bronze badges

Comments

user798287 · Accepted Answer · 2011-06-18 04:26:27Z

0

I figured out the problem finally. What you have to do before you set the highlighting is to remove the currently applied Style to the row by setting the curSelRow.cells[i].style.backgroundColor = ''. Now you can highlight the row by using curSelRow.style.backgroundColor = '#FFEEC2', which will set the row to the highlight value.

In addition, you must save each cell's own style before you reset the values and restore each cells value when the cursor leaves that row. Otherwise you'll get white for each row that you hover over. Again, remember to reset the style for the highlighted row before you setting each cell's style to what it was originally.

What a pain!

edited Jun 18, 2011 at 4:26

user456814

answered Jun 17, 2011 at 17:42

user798287

11 bronze badge

Collectives™ on Stack Overflow

Can't highlight row for dynamically created GridView from JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related