Adding checkbox column to Asp.Net GridView with code example

Adding CheckBoxes to your ASP.NET GridView makes selecting multiple items a breeze. In this Blog post, we'll walk you through the process with simple code examples, so you can improve user interaction and streamline data selection in your web application.

Step-by-Step Guide

Let's dive into how you can integrate CheckBoxes into your GridView:

1. Design Your GridView

Start by designing your GridView in the ASPX markup. Include columns for displaying data and add a TemplateField for the CheckBoxes.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
    </Columns>
</asp:GridView>

2. Bind Data to GridView

In the code-behind, bind your data to the GridView. You can use a collection or retrieve data from a database.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindGridView();
    }
}

private void BindGridView()
{
    // Sample data for the GridView
    List<Item> items = new List<Item>()
    {
        new Item { ID = 1, Name = "Item 1" },
        new Item { ID = 2, Name = "Item 2" },
        new Item { ID = 3, Name = "Item 3" }
    };

    GridView1.DataSource = items;
    GridView1.DataBind();
}

 public class Item
 {
     public int ID { get; set; }
     public string Name { get; set; }
 }

3. Add CheckBoxes

Within the TemplateField of your GridView, insert CheckBox controls. These CheckBoxes will allow users to select individual items.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:TemplateField HeaderText="Select">
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
    

4. Handle RowDataBound Event

Implement the RowDataBound event handler to customize the CheckBox behavior. Ensure that the CheckBoxes are unchecked by default and handle any additional customization based on your requirements.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        CheckBox checkBox = (CheckBox)e.Row.FindControl("CheckBox1");
        checkBox.Checked = false; // Make sure checkboxes are unchecked initially
    }
}

5. Retrieve And Display Selected Items

When the user interacts with the CheckBoxes and submits the form, iterate through the GridView rows to identify the selected items. Retrieve the selected items based on the CheckBox state.

protected void btnSubmit_Click(object sender, EventArgs e)
{
    List selectedItems = new List();

    foreach (GridViewRow row in GridView1.Rows)
    {
        CheckBox checkBox = (CheckBox)row.FindControl("CheckBox1");
        if (checkBox != null && checkBox.Checked)
        {
            // Retrieve the data from the GridView directly
            string name = row.Cells[1].Text; // Assuming the Name column is at index 1
            selectedItems.Add(name);
        }
    }

    lblSelected.Text = "Selected Items: " + string.Join(", ", selectedItems);
}
    

Integrating CheckBoxes into your ASP.NET GridView can significantly enhance the usability and functionality of your web application. By following our step-by-step guide with easy-to-understand code examples.