Friday, 19 October 2012

GridView: Change CheckBoxField style or color


Using CSS:
input[type=CheckBox]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type='checkbox']:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}
input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

Using CheckboxChanged event in aspx.cs file:
protected void MyCheckBoxCheckedChanged(object sender, EventArgs e)
{
    foreach (GridViewRow row in GridView1.Rows) {
        CheckBox cb = (CheckBox)row.FindControl("MyCheckBoxID");
        if (object.ReferenceEquals(sender, cb) && cb.Checked != true) {
             row.BackColor = Color.FromArgb(60, 164, 60)
        }
    }
}

Using Javascript function:

function HighlightRow(chkB) 
        {
            var IsChecked = chkB.checked;
            if (IsChecked) {
                chkB.parentElement.parentElement.style.backgroundColor = '#228b22';
                chkB.parentElement.parentElement.style.color = 'white';
            } else {
                chkB.parentElement.parentElement.style.backgroundColor = 'white';
                chkB.parentElement.parentElement.style.color = 'black';
            }
        }

No comments:

Post a Comment