How to loop through and examine CheckBox control values in a DataGrid column by using ASP.NET and Visual C# .NET

This step-by-step article demonstrates how to loop through each row of an ASP.NET DataGrid control and how to determine if the ASP.NET CheckBox server control that is used to identify the row has been selected.

The sample code in this article uses the Microsoft SQL Server Northwind database to populate the DataGrid control and then adds a CheckBox server control to the initial column for each row. This is a common technique that allows users to select multiple, specific rows in a DataGrid.

back to the top

Requirements

• Microsoft Windows 2000 Professional, Windows 2000 Server, Windows 2000 Advanced Server, or Windows XP Professional
• Microsoft .NET Framework
• Microsoft Internet Information Services (IIS)
• Microsoft Visual Studio .NET

back to the top

Create an ASP.NET Web application by using Visual C# .NET

1. Start Microsoft Visual Studio .NET.
2. On the File menu, point to New, and then click Project.
3. In the New Project dialog box, click Visual C# Projects under Project Types, and then click ASP.NET Web Application under Templates.
4. In the Location box, replace the WebApplication# default name with MyWebApp. If you are using the local server, you can leave the server name as http://localhost. The resulting Location box appears as follows:
   http://localhost/MyWebApp
   

back to the top

Create the sample Web Form page

1. Add a new Web Form to the ASP.NET Web application as follows:
   1. Right-click the project node in Solution Explorer, point to Add, and then click Add Web Form.
   2. In the Name box, type MySample.aspx, and then click Open.
2. In the Properties window, change the pageLayout property for the document to FlowLayout. Although you do not have to do this to use the sample code, this will make the presentation appear cleaner.
3. Add a DataGrid, a Button, and a Label server control to the page as follows:
   1. Drag an ASP.NET DataGrid server control from the Web Forms toolbox onto the page.
   2. In the Properties window, change the ID of the DataGrid control to DemoGrid.
   3. Drag an ASP.NET Button server control from the Web Forms toolbox onto the page below the DataGrid.
   4. In the Properties window, change the ID of the Button control to GetSelections, and then change the Text property to Get Selections.
   5. Drag an ASP.NET Label server control from the Web Forms toolbox onto the page below the Button control.
   6. In the Properties window, change the ID of the Label control to ResultsInfo, and then delete any text in the Text property.
4. Switch to HTML view in the editor. Add the code to the default DataGrid template to construct the columns. The resulting code for the control should appear as follows:

   <asp:DataGrid id="DemoGrid" runat="server" DataKeyField="CustomerID">
   <Columns>
   <asp:TemplateColumn HeaderText="Customer">
   <ItemTemplate>
   <asp:CheckBox ID="myCheckbox" Runat="server" />
   </ItemTemplate>
   </asp:TemplateColumn>
   </Columns>
   </asp:DataGrid>
   

5. Right-click the page, and then click View Code. This opens the code-behind class file in the editor. Add the following namespace references to the code-behind class file:

   using System.Data.SqlClient;
   using System.Text;
   

6. Replace the existing code for the Page_Load event handler with the following code:

   private void Page_Load(object sender, System.EventArgs e)
   {
   if(!IsPostBack)
   {
   //Create a SqlConnection object.
   //Modify the connection string as necessary for your environment.
   SqlConnection cn = new SqlConnection("Server=localhost;database=Northwind;UID=sa;PWD=");
   
   SqlCommand cmd = new SqlCommand("SELECT * FROM Customers",cn);
   cn.Open();
   SqlDataReader reader = cmd.ExecuteReader();
   DemoGrid.DataSource = reader;
   DataBind();
   reader.Close();
   cn.Close();
   }
   
   }
   

7. Switch to Design view, and then double-click GetSelections. This opens the code-behind class file in the editor. Replace the existing code in the GetSelections_Click event handler with the following code:

   private void GetSelections_Click(object sender, System.EventArgs e)
   {
   int rowCount = 0;
   StringBuilder gridSelections = new StringBuilder();
   
   //Loop through each DataGridItem, and determine which CheckBox controls
   //have been selected.
   foreach(DataGridItem DemoGridItem in DemoGrid.Items)
   {
   CheckBox myCheckbox = (CheckBox)DemoGridItem.Cells[0].Controls[1];
   if(myCheckbox.Checked == true)
   {
   rowCount++;
   gridSelections.AppendFormat("The checkbox for {0} was selected<br>", 
   DemoGrid.DataKeys[DemoGridItem.ItemIndex].ToString());
   }
   }
   gridSelections.Append("<hr>");
   
   gridSelections.AppendFormat("Total number selected is: {0}", rowCount.ToString());
   ResultsInfo.Text = gridSelections.ToString();
   }  
   

back to the top

Verify that it works

1. On the File menu, click Save All to save the Web Form and other files that are associated with the project.
2. On the Build menu in the Visual Studio .NET integrated development environment (IDE), click Build Solution.
3. In Solution Explorer, right-click the Web Form page (MySample.aspx), and then click View in Browser. Notice that the page displays the data in the grid. Additionally, a check box appears in the first column of each row. The user can click to select this check box to mark specific rows.
4. Click to select a few of the check boxes for the rows, and then click Get Selections.
   
   After the page makes a round trip to the server and executes the code in the GetSelections_Click event handler, a list of the items that you selected in the previous step appears. The code in the GetSelections_Click event handler loops through each DataGridItem in your ASP.NET DataGrid server control, determines whether the Checked property of the related CheckBox control is true, and then records the associated key value at that specific position for the DataKeys of the DataGrid.

back to the top