Javascript – highlighting gridview rows for striped gridview from checkbox

checkboxgridviewjavascriptjquery

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?

Best Answer

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');
       }
    });
});
Related Topic