Checkbox in Gridview header to select all rows using JavaScript in ASP.NET

In many sites you may watch in a table there are check boxes to select or deselects. And above all these check boxes there is one check box which controls all other text boxes to select and deselect. To day in this example I will show you how to design a check box into a  GridView to design and work like the above statement in ASP.NET.

So, first of all create a new project and add a new WebForm to start. In the C# code add the connection first as per your database and bind your GridView with the DataTable or DataSet. To add a column of check boxes make sure the AutoGenerateColumns property is false. Manually add your database columns and at the last add your check box.

Coding in GridView will be some thing like these.

After binding your GridView check it once if it is running successfully or not. If its running successfully come to the JavaScript coding to select or deselect the check boxes using master check box. As here we are taking master check box only in Header, you can take this also in Footer or in both place. Now its time to code in JavaScript. On the Head section of your ASPX page add Script tag and close it. With in that Script tag write down the following js code.

Now run the project and check if your check boxes are working fine or not. I am sure it will run successfully. In the next article I will show you how to take those selected rows on a button click.

You can download the full source code here.

Download Now