How to Add Checkbox Column in GridView and JavaScript Function to Select All Checkboxes

This Sample code will guide you to Add Checkbox template column in GridView control. add a ASP.NET Check Box control in itemtemplate and a checkbox in header also to implement Select all Functionality.

Check Java Script method implements the select all functionality for checkbox columns.It works whenever user clicks on header check box it select all/Deselect all the grid checkbox.

 

JavaScript Code;

<script type="text/javascript" language="javascript">
function Check(parentChk)

{
var elements = document.getElementsByTagName("input");
for(i=0; i<elements.length;i++)
{
if(parentChk.checked == true)
{
if( IsCheckBox(elements[i]))
{
elements[i].checked = true;
}
}
else
{
elements[i].checked = false;
}
}

}

function IsCheckBox(chk)
{
if(chk.type == 'checkbox') return true;
else return false;
}
</script>

 

ASP.NET Code:

<asp:GridView ID="AdsGrid" runat="server" DataSourceID="AdsDataSource" AutoGenerateColumns="False" DataKeyNames="Id" >
<Columns>

<asp:TemplateField ItemStyle-CssClass="col_checkbox" HeaderStyle-CssClass="col_checkbox">
<HeaderTemplate>
<input type="checkbox" id="ChkSelectAll" onclick="Check(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="AdCheckBox" runat="server" CssClass="AdminAdsGrid" />
</ItemTemplate>
</asp:TemplateField>

</Columns>

</asp:GridView>