Select and Deselect Checkbox with in gridview using Javascript


<asp:GridView ID="gdvShowData" runat="server" AutoGenerateColumns="False" CssClass="gdvBody" Width="100%" >
<Columns>
   <asp:TemplateField>
       <HeaderTemplate>
               <asp:CheckBox ID="chkheader" runat="server"  onclick="Calculate(this);" ToolTip="Check to select all rows"/>
       </HeaderTemplate>
       <ItemTemplate>
               <asp:CheckBox ID="chkchild" runat="server" />
       </ItemTemplate>
   <ItemStyle Width="8%" />
</asp:TemplateField>        
    <asp:BoundField HeaderText="Name" DataField="Name" />            
 </Columns>
 <EmptyDataTemplate>
    There is no record.
 </EmptyDataTemplate>
</asp:GridView>


function Calculate(SelectAllCheckBox)
{
        var chkAll=document.getElementById(SelectAllCheckBox.id);
        var Parentgrid = document.getElementById('<%= gdvShowData.ClientID %>');      
        var items = Parentgrid.getElementsByTagName('input');
        for (i = 1; i < items.length; i++)
        {          
            if (items[i].type == "checkbox")
            {              
                if (chkAll)
                 items[i].checked = chkAll.checked;              
            }
        }
}

function Selectchildcheckboxes(header)
{
    var ck = header;
    var count = 0;
    var gvcheck = document.getElementById('gdvShowData');
    var headerchk = document.getElementById(header);
    var rowcount = gvcheck.rows.length;
    for (i = 1; i < gvcheck.rows.length; i++)
   {
       var inputs = gvcheck.rows[i].getElementsByTagName('input');
       if (inputs[0].checked)
      {
            count++;
       }
    }
     if (count == rowcount-1)
    {
           headerchk.checked = true;
     }
    else
    {
           headerchk.checked = false;
     }
}

protected void gdvShowData_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox headerchk = (CheckBox)gdvShowData.HeaderRow.FindControl("chkheader");
CheckBox childchk = (CheckBox)e.Row.FindControl("chkchild");
childchk.Attributes.Add("onclick", "javascript:Selectchildcheckboxes('" + headerchk.ClientID + "')");
}
}


Comments