How To Add A CheckBox Column to GridView in ASP.NET

Many a times, we need to give users a Checkbox in a GridView that users can use to select multiple rows from the GridView. In previous posts, we saw how we can do this in Windows Forms. In this post, we will see how we can add a CheckBox column to an existing GridView control in ASP.NET.

Let’s get started. We assume that we have a GridView with an existing set of columns getting populated with some data. So, we have the below definition of GridView in our ASPX page.

<asp:gridview ID="grdData" runat="server" 
AutoGenerateColumns="False" CellPadding="4" CssClass="grdData"
            ForeColor="#333333" GridLines="None" Width="200">
            <alternatingrowstyle BackColor="White" 
            ForeColor="#284775"></alternatingrowstyle>
            <columns>
                <asp:boundfield DataField="ID" 
                HeaderText="ID"></asp:boundfield>
                <asp:boundfield DataField="Name" 
                HeaderText="Name"></asp:boundfield>
            </columns>
            <editrowstyle BackColor="#999999"></editrowstyle>
            <footerstyle BackColor="#5D7B9D" 
            Font-Bold="True" ForeColor="White"></footerstyle>
            <headerstyle BackColor="#5D7B9D" 
            Font-Bold="True" ForeColor="White"></headerstyle>
            <pagerstyle BackColor="#284775" 
            ForeColor="White" HorizontalAlign="Center"></pagerstyle>
            <rowstyle BackColor="#F7F6F3" 
            ForeColor="#333333"></rowstyle>
            <selectedrowstyle BackColor="#E2DED6" 
            Font-Bold="True" ForeColor="#333333"></selectedrowstyle>
            <sortedascendingcellstyle BackColor="#E9E7E2"></sortedascendingcellstyle>
            <sortedascendingheaderstyle BackColor="#506C8C"></sortedascendingheaderstyle>
            <sorteddescendingcellstyle BackColor="#FFFDF8"></sorteddescendingcellstyle>
            <sorteddescendingheaderstyle BackColor="#6F8DAE"></sorteddescendingheaderstyle>
        </asp:gridview>

And we have the below code to populate the GridView with some dummy data.

private void LoadGridData()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("Id");
    dt.Columns.Add("Name");
    for (int i = 0; i < 10; i++)
    {
        DataRow dr = dt.NewRow();
        dr["Id"] = i + 1;
        dr["Name"] = "Student " + (i + 1);
        dt.Rows.Add(dr);
    }
    grdData.DataSource = dt;
    grdData.DataBind();
}

The output of the above code is something like below:

Now, we will be adding a CheckBox column to this Grid. For doing this, we will make use of TemplateField and define a new TemplateField column in the existing set of columns as below:

<asp:templatefield HeaderText="Select">
    <itemtemplate>
        <asp:checkbox ID="cbSelect"
        CssClass="gridCB" runat="server"></asp:checkbox>
    </itemtemplate>
</asp:templatefield>

Your final GridView definition will appear like below:

<asp:gridview ID="grdData" runat="server" 
AutoGenerateColumns="False" CellPadding="4" 
CssClass="grdData" ForeColor="#333333" 
GridLines="None" Width="200">
            <alternatingrowstyle BackColor="White" 
            ForeColor="#284775"></alternatingrowstyle>
            <columns>
                <asp:templatefield HeaderText="Select">
                    <itemtemplate>
                        <asp:checkbox ID="cbSelect" 
                        CssClass="gridCB" runat="server"></asp:checkbox>
                    </itemtemplate>
                </asp:templatefield>
                <asp:boundfield DataField="ID" 
                HeaderText="ID"></asp:boundfield>
                <asp:boundfield DataField="Name" 
                HeaderText="Name"></asp:boundfield>
            </columns>
            <editrowstyle BackColor="#999999"></editrowstyle>
            <footerstyle BackColor="#5D7B9D" Font-Bold="True" 
            ForeColor="White"></footerstyle>
            <headerstyle BackColor="#5D7B9D" Font-Bold="True" 
            ForeColor="White"></headerstyle>
            <pagerstyle BackColor="#284775" ForeColor="White" 
            HorizontalAlign="Center"></pagerstyle>
            <rowstyle BackColor="#F7F6F3" ForeColor="#333333"></rowstyle>
            <selectedrowstyle BackColor="#E2DED6" Font-Bold="True" 
            ForeColor="#333333"></selectedrowstyle>
            <sortedascendingcellstyle BackColor="#E9E7E2"></sortedascendingcellstyle>
            <sortedascendingheaderstyle BackColor="#506C8C"></sortedascendingheaderstyle>
            <sorteddescendingcellstyle BackColor="#FFFDF8"></sorteddescendingcellstyle>
            <sorteddescendingheaderstyle BackColor="#6F8DAE"></sorteddescendingheaderstyle>
        </asp:gridview>

Save the code and refresh your ASPX page. Now, you will see a CheckBox appearing beside each row in your GridView.

Hope you like this! Keep learning and sharing! Cheers!