Wednesday, June 27, 2007

DataGrid and Checkboxes


Working with Checkboxes and Datagrid is an interesting aspect. Their may be many situations in which, we need to allow the user to select many rows in a table or datagrid. Think of a datagrid which has a checkbox in the first column. User can select any number of rows they may need. Our job is to find the number of rows selected by the user. Once we have the ID of the selected rows, we can do anything with those rows. We can delete or what ever we need to do with the selected rows. In this article, we will see, how to know the number of rows selected by the user. We will have a Datagrid and a button. While the user clicks on the button, we will parse through the datagrid and find the rows selected by the user.

I assume that, the reader knows to create a simple datagrid with TemplateColumn and ItemTemplate tags.

Things that we will be learning in this article
  1. How to populate a DataGrid?
  2. How to parse through the rows and columns in a Datagrid?
  3. How to find the value of a checkbox?
  4. How to retrieve all the information of a selected row?
Populating the DataGrid

For our example, we will take the table STORE in the PUBS Database. Since stored procedures are very much better than inline query, we use a stored procedure called, sp_stores_sel, which contains a single SQL statement. The SQL statement would be Select * from stores.

How to parse through all the rows and columns in a DataGrid?

In the introduction, we saw that we need a button to select the rows. The code that we are going to discuss is in the OnClick event of the Select button.

The primary thing that we need is a DataGridItem. Then we need to make use of the FindControl method to retrieve the value of checkbox and other columns in the datagrid. Let us take a look at the code within the OnClick event of the button.

Code in the OnClick event of the Select button.
    Dim myDataGridItem As DataGridItem
    Dim chkSelected As System.Web.UI.WebControls.CheckBox
    Dim strStoreName As String
    Dim strStoreID As String

    lblStatus.Text = "<br>You selected the Following items:<br><br>"

    For Each myDataGridItem In DG_CheckBox.Items

        chkSelected = myDataGridItem.FindControl("chkSelection")
        If chkSelected.Checked Then
            strStoreName = CType(myDataGridItem.FindControl("lblStoreName"), Label).Text
            strStoreID = CType(myDataGridItem.FindControl("hdnStoreID"), Label).Text
            lblStatus.Text += "The store name is <b>" & strStoreName & "</b>"
            lblStatus.Text += " and the StoreID is <b>" & strStoreID & "</b><br>"
        End If


How it works?

In the above code, we have four variables. An instance of DataGridItem, a CheckBox, and two String variables. We need a looping structure to parse through all the rows and columns. The best one is the For loop. Since we have a DataGridItem, we need to use this in the For Loop.

The statement For Each myDataGridItem In DG_CheckBox.Items starts a loop which parses through all the rows using the property Items of the datagrid. DG_CheckBox is the name of the DataGrid.

In a datagrid, we will have many columns. We need to retrieve the value of checkbox in each row and the StoreID for that row. The best way to retrieve the value of each column is by using the FindControl method. The name of the CheckBox control is chkSelection. So, we should have a FindControl method which returns the CheckBox object back and this is done by chkSelected = myDataGridItem.FindControl("chkSelection"). The above statement is the most important statement in this article. It is the above statement which retrieves the value of each checkbox. Once we have the value of each checkbox, then all you have do is

# Check whether the checkbox is checked or not, by using the property, Checked.
# If the Checkbox is Checked, then use the FindControl method to retrieve other fields such as StoreID and StoreName.

Sample output of our scenario

DataGrid with Checkboxes - 35,452 bytes
Fig: DataGrid with Checkboxes.

Test this Script

Download the code

Click here to download the ASPX page
Click here to download the Stored Procedure


Checkboxes in a Datagrid is a very useful one in most of the web applications. Just use this code when ever you want to select a group of items from a DataGrid.