Paul Mrozowski's Blog - Live Checkboxes in ASP.NET Grid

Tuesday, April 15, 2008

One request that comes up from time to time is to embed a checkbox inside of an ASP.NET grid control for boolean data.

Unfortunately, one of the downsides to this is that the controls are "read only" - they don't let you check or uncheck them

without putting the row into edit mode. That works, but in some cases this isn't all that great either. What do you do if you just want a checkbox on each row, that's "live" and causes a postback as you check/uncheck items? Thankfully this doesn't take much code but figuring out the first time can be really painful. To get the "live" checkbox, just wrap it inside of a template. (In the example code I created a new Web Form named "GridCheckbox").

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridCheckbox.aspx.cs" Inherits="WebApplication1.GridCheckbox" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>        
        <asp:GridView runat="server" ID="grdList" AutoGenerateColumns="false" 
            onrowdatabound="grdList_RowDataBound">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>                        
                        <asp:CheckBox runat="server" ID="chkItem" Checked='<%# Container.DataItem %>' AutoPostBack="True" OnCheckedChanged="CheckChanged"/>                                               
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>
 

Make sure you set the "AutoPostBack" to true. Then set it's OnCheckedChanged event handler to call your server side code.

Now let's add some code to the Page_Load to give our grid something to bind to:

protected void Page_Load(object sender, EventArgs e)
{
    bool[] items = { true, true, false, false, true };
    if (!Page.IsPostBack)
    {
        this.grdList.DataSource = items;
        this.grdList.DataBind();
    }
}
 
 

In my example code, I'm just binding to a simple boolean collection to keep things simple. Now we need an event handler to respond to our checkbox event:

protected void CheckChanged(object sender, EventArgs e)
{           
}
 

The code doesn't do anything yet but at this point you might be wondering how we figure out which checkbox we checked - normally, your grid is bound to a different row in some table. Each checkbox is related to that specific row. How or where do we get that from? The grid isn't much help in this case because it's not raising the event. If we were using a Button we could set it's CommandName and/or CommandArgument properties to hold something like the primary key of the row in our table. The checkbox control doesn't have any such properties. ASP.NET controls have an InputAttributes collection where you can place name/value pairs - this information is passed to the client (and back to the server), so it makes this relatively painless.

First, add an event to onRowDataBound of the grid (already shown in the ASPX above). Now add the event in our code-behind:

protected void grdList_RowDataBound(object sender, GridViewRowEventArgs e)
{        
}
 

We can't reference the control directly by name, since it was embedded in the grid and ASP.NET has made sure it's uniquely named. Let's use the FindControl method to do this. I've also added the code to add a Value attribute and added a member called m_row. I'm just using this so we can have a different value on each and every row of the grid. In a real application this is where you'd pull the primary key value from your datasource (probably using e.Row.DataItem).

private int m_row = 0;
protected void grdList_RowDataBound(object sender, GridViewRowEventArgs e)
{
    CheckBox chk = e.Row.FindControl("chkItem") as CheckBox;
 
    if (chk != null)
        chk.InputAttributes.Add("Value", this.m_row.ToString());
    this.m_row++;
}

Now we're just about done - all that's left is retrieving this value back on the server when the Checkbox is checked or unchecked:

protected void CheckChanged(object sender, EventArgs e)
{
    CheckBox chk = sender as CheckBox;
    string val = "";
    if (chk != null)
        val = chk.InputAttributes["Value"];
}

So our completed codebehind page looks like this:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
 
namespace WebApplication1
{
    public partial class GridCheckbox : System.Web.UI.Page
    {
        private int m_row = 0;
        protected void Page_Load(object sender, EventArgs e)
        {
            bool[] items = { true, true, false, false, true };
            if (!Page.IsPostBack)
            {
                this.grdList.DataSource = items;
                this.grdList.DataBind();
            }
        }
 
        protected void CheckChanged(object sender, EventArgs e)
        {
            CheckBox chk = sender as CheckBox;
            string val = "";
            if (chk != null)
                val = chk.InputAttributes["Value"];
        }
 
        protected void grdList_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            CheckBox chk = e.Row.FindControl("chkItem") as CheckBox;
 
            if (chk != null)
                chk.InputAttributes.Add("Value", this.m_row.ToString());
            this.m_row++;
        }
    }
}

Now when you run this every time you check or uncheck an item you should see the page post-back (set a breakpoint on CheckChanged). You can now update your data, or whatever else you need to do in response to this event.

Tuesday, April 15, 2008 9:18:15 PM (Eastern Standard Time, UTC-05:00)

Comments [0] -

ASP.NET

Name
E-mail	(will show your gravatar icon)
Home page

	Remember Me
Comment (Some html is allowed: `a@href@title, b, i, strike`) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.
Enter the code shown (prevents robots):
Live Comment Preview