Select-All Checkbox For GridView in ASP.NET

Sometimes when your boss asks you to make an ASP.NET web application with a GridView containing business objects, one of the required features is a checkbox on each row so that the objects can be selected individually, so that an operation can be executed on only the selected objects.

When that happens, if you don't already know how to make that happen, you will search the internet, and will find the solution:

• Click on the smart tag for the GridView
• Choose Edit Columns...
• Add a new TemplateColumn to your GridView
• Click OK
• Click on the smart tag for the GridView again
• Choose Edit Templates...
• Click on the smart tag for the GridView yet again
• Select Display: Item Template
• Drag a CheckBox from the Toolbox panel to the item template
• ...do whatever else you need to do with the CheckBox

Then, sometimes your boss will come back and commend you on a job well done, but notice that he wants a little bit more. In this case, your boss may ask for a button to select or deselect all the listed objects. If he does this, you will find, much to your horror as an ASP.NET programmer, that you may actually have to (brace yourself) write some code (but not much). Verily, Microsoft hasn't pre-implemented a solution to this problem, so you can't respond to your boss's request by merely clicking with your mouse. Nevertheless, there are many straightforward solutions, and here is one of them.

This solution puts a CheckBox in the header row of the GridView, and when the user selects or deselects that CheckBox, all the CheckBoxes in all the rows are selected or deselected. Begin by adding the CheckBox to your ASPX page:

• Click on the smart tag for the GridView
• If you aren't still editing templates, choose Edit Templates, then click the smart tag again
• Select Display: Header Template
• Drag a CheckBox from the Toolbox panel to the header template
• Right-click the CheckBox and choose Properties (the Properties panel will appear)
• Set the AutoPostBack property to true
• Choose the Events button of the Properties panel
• Add a method for the CheckedChanged event

That's all it takes for the UI: you have added a CheckBox to the header row, set it to post back events to the server, and set an event handler for CheckedChanged events. The last, simple thing to do is to write the code to select or deselect all the object-row CheckBoxes. Here is an example; the name of the method and the names of the CheckBoxes will be different in your application.

protected void GridViewHeaderCheckBox_CheckedChanged(object sender, EventArgs e)

{

    foreach (GridViewRow row in SourceEventGridView.Rows)

    {

        CheckBox rowCheckBox = row.Cells[0].FindControl("GridViewRowCheckBox") as CheckBox;

        rowCheckBox.Checked = (sender as CheckBox).Checked;

    }

}

Other solutions may be more appropriate in other situations. This problem could certainly be solved with Select All and Select None buttons; or with JavaScript; or surely in many other ways. Whichever way you make it happen, your boss should be satisfied.