Question

I have a gridview with some data bound to it. I also have different background for alternating rows, so the table is more readable… How do I change the color of the row background when checkbox in the first column is checked and change it back to original when it is unchecked. The problem I’m having is, how to know if original background (after unchecking the checkbox) is for normal row or for alternating row?

I know how to change row attributes like this:

protected void gvUser_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == System.Web.UI.WebControls.DataControlRowType.DataRow)
    {
        e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#D9ECFB'");
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle;");
    }
}

But, what if there are more checkboxes selected, how do I know which is the original background?

Answer 1

I will give a jQuery solution and I hope you like it. What I do here is to find all the checkbox that are inside the GridView control, and then when you click on one of them I get the full line and change the color, but keeping the old one to bring it back. Only one note, you must place on the rows the style .row

function InitTheChecks()
{
    var updateButtons = jQuery('#<%=GridView.ClientID%> input[type=checkbox]');

    updateButtons.each(function (){
        jQuery(this).attr('onclick', null).click(function () 
        {
            var ThisCheckBox = jQuery(this);

            if(ThisCheckBox.is(':checked'))
            {
                ThisCheckBox.attr('oldBackColor', ThisCheckBox.parents(".row").css("background-color"));
                ThisCheckBox.parents(".row").css("background-color", "#FFD8CE");
            }
            else
            {
                ThisCheckBox.parents(".row").css("background-color", ThisCheckBox.attr('oldBackColor'));
            }
        });
    });    
}    

and run the InitTheChecks() OnPage load.

how to know if original background 

To answer to this question, what I do is that I place the old color in an attribute on the tag before I change it, something like a memory keeper 🙂