ASP.NET Toggle Checkboxes Delete Multiple Records in GridView

Objective: This article describes how to create Toggle Checkboxes (select all, unselect all) in a GridView.

Background: With all the wonderful built in feature rich functions that Microsoft provides for the GridView, one very commonly used element called the Checkbox Toggle is sorely missed from all the out-of-the-box functionality. This procedure in fact is so fundamental that I can’t imagine creating an administrative backend without it. Yet, for some strange reason, finding an article that clearly lays out its general principles for the beginning ASP.NET developer is rather time consuming. In this article we will examine the easy few lines of server side code that is required to accomplish this. In a future article we will do the same thing with client side Javascript. So ho humm and here we go.

Procedure: Follow instructions below to accomplish this task. This article uses MSSQL Server Express 2005 and Visual Web Developer Express 2008.

1. Drop a DataGrid onto your page, connect to your database and select some data to be displayed in the grid. If you want to use this GridView to delete multiple rows of data for example, make sure the delete command is created for it. This article assumes that you already know how to do that.
2. In design view, click on the GridView’s smart tag and click on “edit columns”.
3. In the following window add a “template field” to the selected fields items and use the up arrow to make the first field on top. This will make it the first column in our GridView.
4. Click OK to close the edit columns window.
5. Now click on the smart tag again and select “edit templates”.
6. Into the empty item template field, drag and drop an asp checkbox from the standard toolbox menu.
7. Give the checkbox an ID (i.e. cbxDataRows), something that you can easily remember and something that kind of denotes what it is and what it does. I use the three letter Hungarian Notation but you can use whatever comes easy for you.
8. Now click on the smart tag and click the “end template editing” and close the smart tag.
9. Click on the GridView once to select it and in the Properties menu on the right side of your editor find the “DataKeyNames” under the Data section.
10. Type in the column name of your database table whose value you want to assign to the checkboxes (i.e. the primary key field name).
11. Now drop two buttons onto the web form under your GridView.
12. Set the first button’s ID to btnSelectAll and its text to “Select All”.
13. Set the second button’s ID btnUnselectAll and its text to “Unselect All”.
14. Now let’s go into code view and write a little bit of code. I know it is a pain having to do this but lets anyway otherwise we can’t show off our talents to friends and relatives and everybody else who doesn’t care.
15. Type or copy and paste the following code between the script tags or into your code behind page.

    '.........................Toggle Checkboxes Start.........................
    'create private subprocedure for button toggle as a boolean (on/off)
    'for each row in the grid view
    'declare all checkboxes as cbxDataRows (name)
    'if a checkbox is selected then
    'set its value to the checkState of the button clicked (select/unselect)
    'end if statement
    'end the for/each statement
    'end subprocedure
    Private Sub ToggleCheckState(ByVal checkState As Boolean)
        For Each row As GridViewRow In GridView1.Rows
            Dim cb As CheckBox = row.FindControl("cbxDataRows")
            If cb IsNot Nothing Then
                cb.Checked = checkState
            End If
        Next
    End Sub
    
    'create subprocedure click event for select all button
    'when clicked, set the checkbox value to ON
    'end sub procedure
    Protected Sub btnSelectAll_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnSelectAll.Click
        ToggleCheckState(True)
    End Sub
    
    'create subprocedure click event for unselect all button
    'when clicked, set the checkbox value to OFF
    'end sub procedure
    Protected Sub btnUnselectAll_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnUnselectAll.Click
        ToggleCheckState(False)
    End Sub
    '..........................Toggle Checkboxes End..........................

16. Load the page into your browser and test the buttons. Not only they will work, but each checkbox will have a data value based on Step. 10. above.
17. Optional: If you wanted to delete the selected records, you would add the following script block, below the code in the table above.

    '......................Delete Selected Command Start......................
        'create protected subprocedure click event for the delete button
        'for each row in the gridview
        'if checkbox is checked
        'declare primary key(ID) as an integer and set it equal to the primary key of selected checkboxes
        'call the SQL datasource delete parameter and set it equal to the primary key
        'call the SQL datasource delete command to fnish deleting the selected data
        'show confirmation label text
        'end if statement
        'end for/each statement
        'end subprocedure
        Protected Sub btnMultipleRowDelete_Click(ByVal sender As Object, ByVal e As System.EventArgs)
            For Each row As GridViewRow In GridView1.Rows
                Dim cb As CheckBox = row.FindControl("cbxDataRows")
                If cb IsNot Nothing AndAlso cb.Checked Then
                    Dim DataTableFieldNameHere As Integer = Convert.ToInt32(GridView1.DataKeys(row.RowIndex).Value)
                    SqlDataSource1.DeleteParameters("DataTableFieldNameHere").DefaultValue = DataTableFieldNameHere.ToString()
                    SqlDataSource1.Delete()
                    confirmLabel.Text = "Delete was successful."
                End If
            Next
        End Sub
        '......................Delete Selected Command End........................

18. And that’s it. Remember that the underscore marks in the code above mean that the code line was too long to display here properly so the rest of the line is broken to the next line. Fix this when copying and pasting. Also, the code above uses a label on the page to write the success message to. You can drop one onto the page and name it confirmLabel or just delete that line of code if you don’t want to mess with it.