highlighting gridview rows for striped gridview from checkbox

Question

Within the gridview I have, I'm trying to make it so when the user checks a check box for the row the row is highlighted. Now, this GridView is striped (meaning even rows have one background color and odd rows have another). This code to do it is floating around the net in various forms...

var color = '';
function changeColor(obj) {
  var rowObject = getParentRow(obj);
  var parentTable = document.getElementById("gvCategories");
  if(color == ''){
    color = getRowColor();
  }
  if(obj.checked){
    rowObject.style.backgroundColor = 'Yellow';
  }
  else{
    rowObject.style.backgroundColor = color;
    color = '';
  }

  // private method
  function getRowColor(){
  if(rowObject.style.backgroundColor == '') return parentTable.style.backgroundColor;
  else return rowObject.style.backgroundColor;
  }
}

// This method returns the parent row of the object
function getParentRow(obj){
  do{
    obj = obj.parentElement;
  }
  while(obj.tagName != "TR")
  return obj;
}

That's a straight copy and paste from here... http://aspadvice.com/blogs/azamsharp/archive/2007/06/26/Highlight-GridView-Rows-Using-CheckBox.aspx

This is fine if your GridView isn't striped. However, as I mentioned earlier mine is striped. The problem here is if you uncheck a box depending on the order in which you selected items the row background color can revert to the incorrect color.

I've tried thinking of some algorithm to do this but I've had little luck. My initial thought was some trickery with a stack, but I quickly realized that would require users to uncheck back in the reverse order they checked items.

The only other thing I can think of is somehow checking if the row index is odd or even, and if it's odd revert to a specific color and if it's even revert to a specific color. However, I'm not sure how to check for specific indexes of a gridview from javascript.

I'm ultimately going to be using jQuery for this so any advice regarding javascript with or without jquery is fine. Any ideas at all on how to achieve this?

EDIT: So I'm still not having any luck, I thought I'd post what I currently have.

function highlightRow(object) {
    if ($(object).attr("checked") == true) {
        alert('is checked!'); // this will fire
        $(object).parent('tr').addClass("highlightedRow");
    }
    else {
        alert('is not checked!');
        $(object).parent('tr').removeClass("highlightedRow");
    }
}

As the comment there says, I can tell if an item is being checked or not but the class toggle just doesn't seem to be being applied. The highlighted row is declared after the classes it should be overriding in the CSS file. Does this provide any extra info as to what may be going wrong?

Answer 1

I think you'd have better luck applying and removing a class that sets the background color when the checkbox is checked. That way you can simply remove the class when it is unchecked and the original CSS will be applied. Just make sure that the "highlighted" class appears after the other classes in your CSS file so that it overrides their settings. This should be easy (easier) to do with jQuery.

The following assumes that the class rowCheckbox has been applied to all of the checkboxes, but you could select them however you want. It relies on the highlight class being defined to override the background color for selected rows. Your normal row coloring would also be applied via classes.

$(document).ready( function() {
    $('.rowCheckbox').click( function() {
       if (this.checked) {
           $(this).parent('tr').addClass('highlight');
       }
       else {
           $(this).parent('tr').removeClass('highlight');
       }
    });
});

Answer 2

One way to do it (may not be the best way).... You could modify the method above so that you use a 'hash table' like structure, and store the ID of the row (tr) against its original colour so when it comes to unchecking the checkbox, you could then lookup its original colour and set it accordingly...

Answer 3

I finally had some time to come back to this issue and I figured it out. For some reason this bit here...

$(object).parent('tr')

wasn't grabbing the row. I honestly didn't investigate much into why since this led me to the real issue.

What was happening was the already set background color styling was not being overridden by the styling being set via...

.addClass('highlight');

So, giving the 'highlight' class background styling the important tag did the trick.

.SpatialDataHighlightedRow {
    background-color: #DDDDDD !important;
}

Answer 4

For me it didn't work until I changed parent to parents:

       $(this).parents('tr').addClass('highlight');

With parent it didn't locate the tr correctly