Binding Checkbox in GridView (A work around)

I needed to bind a checkbox in gridview to a database field but to my disappointment I found that this was not easy. We could bind “Text” property but what if I don’t want to display the value I am binding (e.g. ID of that record). Here is a work around.

I added a hidden field next to checkbox like below.

<span id="spanTextBox">
<asp:CheckBox ID="chkItem" runat=""server"" Checked="false" />
<asp:HiddenField ID="hfdID" Value=" runat=""server"" />
</span>

It’s easy to access this from server side but if you want the value (intOrderId in my case) in javascript on checkbox click it requires a little trick.

I added a javascript function to each checkbox in databound event of grid.

protected void dgvOrders_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox chk = e.Row.FindControl("chkItem") as CheckBox;
chk.Attributes.Add("onclick", "CheckChanged(‘" + chk.ClientID + "‘);");
}
}

Javascript function added above goes here.

function CheckChanged(id) {
// The line below returns the value of that hidden field we just added.
// So in my case I get the intOrderId value here.
// Note that both these controls should be in a separate container
// like it have added it in the span.
var text = document.getElementById(id).nextSibling.nextSibling.value;
}

Hope this helps you. Enjoy coding….!