How to Check or UnCheck Checkboxes in Asp:gridview
Introduction:
In this article I will explain how to select/deselect all the checkboxes in gridview using JavaScript.
Description:
I have a one gridview with checkboxes here my requirement is if I select header checkbox of gridview I need to select all the child checkboxes in gridview and if I deselect header checkbox I need to deselect all the child checkboxes in gridview and if I select all the child checkbox I need to select the header checkbox and if any child checkbox deselected I need to deselect header checkbox for this I have written JavaScript function to achieve this functionality.
I have a one gridview with checkboxes here my requirement is if I select header checkbox of gridview I need to select all the child checkboxes in gridview and if I deselect header checkbox I need to deselect all the child checkboxes in gridview and if I select all the child checkbox I need to select the header checkbox and if any child checkbox deselected I need to deselect header checkbox for this I have written JavaScript function to achieve this functionality.
Design your aspx page like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Check/Uncheck all the Checkboxes in Gridview</title>
<script type="text/javascript">
// Select/Deselect checkboxes based on header checkbox
function SelectheaderCheckboxes(headerchk) {
debugger
var gvcheck = document.getElementById('gvdetails');
var i;
//Condition to check header checkbox selected or not if that is true checked all checkboxes
if (headerchk.checked) {
for (i = 0; i < gvcheck.rows.length; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
inputs[0].checked = true;
}
}
//if condition fails uncheck all checkboxes in gridview
else {
for (i = 0; i < gvcheck.rows.length; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
inputs[0].checked = false;
}
}
}
//function to check header checkbox based on child checkboxes condition
function Selectchildcheckboxes(header) {
var ck = header;
var count = 0;
var gvcheck = document.getElementById('gvdetails');
var headerchk = document.getElementById(header);
var rowcount = gvcheck.rows.length;
//By using this for loop we will count how many checkboxes has checked
for (i = 1; i < gvcheck.rows.length; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
if (inputs[0].checked) {
count++;
}
}
//Condition to check all the checkboxes selected or not
if (count == rowcount-1) {
headerchk.checked = true;
}
else {
headerchk.checked = false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvdetails" runat="server" DataSourceID="dsdetails" onrowdatabound="gvdetails_RowDataBound" >
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkheader" runat="server" onclick="javascript:SelectheaderCheckboxes(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkchild" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="dsdetails" runat="server" ConnectionString="<%$ConnectionStrings:dbconnection %>"
SelectCommand="select * from UserInfo" >
</asp:SqlDataSource>
</div>
</form>
</body>
</html> |
After completion of aspx page design write the following code in codebehind
protected void gvdetails_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox headerchk = (CheckBox)gvdetails.HeaderRow.FindControl("chkheader");
CheckBox childchk = (CheckBox)e.Row.FindControl("chkchild");
childchk.Attributes.Add("onclick", "javascript:Selectchildcheckboxes('" + headerchk.ClientID + "')");
}
}
|
After that set your database connection in web.config like this because we are using this connection in our sqldatasource to get the data from database
<connectionStrings>
<add name="dbconnection" connectionString="Data Source=lokesh;Integrated Security=true;Initial Catalog=SampleDB"/>
</connectionStrings >
Mr Lokesh Kumar Gupta,
ReplyDeleteYou are writing articles just copying and pasting articles from www.aspdotnet-suresh.com remove all the articles whatever you copy and paste otherwise i will give compalint on you with DMCA Notice