Selecting all check boxes in a gridview control

Please visit my new Web Site https://coderstechzone.com

By using client script selecting all check boxes in a gridview control is a most common task. Here i am trying to show an example for begginers how we can provide this functionality into our pages to enhance user experience. Here i am using a tempalte column to add both header checkbox & rows checkbox in the gridview. When user click on the header checkbox then a javascript method will be invoked To select/deselect all checkboxes inside the gridview rows depends on header checkbox checked property. Like:

So to do that at first i need to add a gridview control in my aspx page. Code like:

<b>List of suppliers:</b>

<asp:GridView runat="server" ID="gvEdit" DataKeyNames="ID" AutoGenerateColumns="false" >
<Columns>

<asp:TemplateField HeaderText="Select">
<ItemTemplate><asp:CheckBox runat="server" ID="chk"/></ItemTemplate>
<HeaderTemplate>
<input id="chkAll" onclick="javascript:GridSelectAllColumn(this, 'chk');" runat="server" type="checkbox" value="" />
</HeaderTemplate>
</asp:TemplateField>

<asp:BoundField DataField="Code" HeaderText="Code" ></asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Name" ></asp:BoundField>
<asp:BoundField DataField="Address" HeaderText="Address"></asp:BoundField>
<asp:BoundField DataField="Contact" HeaderText="Contact no"></asp:BoundField>

</Columns>
</asp:GridView>

Now gridview control added in our page. So now we can populate our gridview from serverside code. I hope its not necessary to provide server side code in this post.

Now to acheive our goal we need to do just adding a javascript function. Add the following javascript function to select all check boxes within a GridView.

function GridSelectAllColumn(spanChk, chkName)
{

var oItem = spanChk.children;
var theBox= (spanChk.type=="checkbox") ? spanChk : spanChk.children.item[0]; xState=theBox.checked;
elm=theBox.form.elements;

for(i=0;i -1)
{
if(elm[i].checked != xState)
elm[i].click();
}//end for

}//end func

Hope now it will work perfectly. For further study you can try with jquery :)