Adding a check all box to check checkboxes within a row in a Gridview
When developing a gridview recently, the need to be able to have a check all button within a row on the gridview came up. At first I thought this would be an easy task, but it turned out that my first few ideas/attempts didn’t really work out. The key for this ability is that I did not want to postback when clicking the check all checkbox. I finally came up with a solution that is posted below.
Assuming our gridview looks something like this:
<asp:GridView ID="gvStuff" runat="server" AutoGenerateColumns="false">
<asp:TemplateField HeaderText="Check/Uncheck Row">
<ItemTemplate>
<asp:Checkbox ID="chkAll" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkCol1″ runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkCol2″ runat="server" />
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>
ASP.NET allows you to add inline onclick text within the Checkbox tag that will render the way you type it. We’ll utilize this feature to add this to the chkAll control.
<asp:Checkbox ID="chkAll" onclick="javascript:CheckAll(this);" runat="server" />
Now the clicking of the check all column checkbox will trigger the CheckAll javascript function while passing in the control information. Next we need to develop the javascript function that will handle this.
The first part of the function will create three variables. One for the status (checked or unchecked) of the passed in checkbox, one for the element id of the control being passed in, and finally, we’re going to have a variable that represents all the input fields in the row by using the parentNodes of the current control. Thankfully, Gridview output valide code so the parentNodes should always work unless you are doing weird things inside the ItemTemplates.
function CheckAll(sp)
{
var isChecked = sp.checked;
var thisItem = sp.id;
var items = sp.parentNode.parentNode.getElementsByTagName("input");
}
Next we will loop through the items variable. While looping we want to make sure the item in the loop is a checkbox (in case you have other things in the row) and also that it’s not the checkbox which checks all. Then, check the status of the check all checkbox, if it’s checked, check the checkbox, if not, uncheck. (quite the tongue twister there!)
for (i=0; i<items.length; i++)
{
if (items[i].id != thisItem && items[i].type=="checkbox")
{
if (isChecked)
{
items[i].checked = true;
}
else
{
items[i].checked = false;
}
}
}
The complete function looks like this
<script language="javascript">
function CheckAll(sp)
{
var isChecked = sp.checked;
var thisItem = sp.id;
var items = sp.parentNode.parentNode.getElementsByTagName("input");
for (i=0; i<items.length; i++)
{
if (items[i].id != thisItem && items[i].type=="checkbox")
{
if (isChecked)
{
items[i].checked = true;
}
else
{
items[i].checked = false;
}
}
}
}
</script>
That’s it, pretty straightfoward once you look at it and remember that checkbox controls allow inline onclick scripts. This script should work no matter how many checkboxes you have within your row in the Gridview. Let me know if you have any issues with it.
Leave a Comment
If you would like to make a comment, please fill out the form below.