Check And UnCheck CheckBoxes in the Gridview Using Javascript
Description:
Here we discuss about how to check And UnCheck all the checkboxes in the gridview Using Javascript
Emp.aspx:| <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <script type="text/javascript"> function SelectAll(id) { //get reference of GridView control var grid = document.getElementById("<%= gvEmpdetails.ClientID %>"); //variable to contain the cell of the grid var cell; if (grid.rows.length > 0) { //loop starts from 1. rows[0] points to the header. for (i = 1; i < grid.rows.length; i++) { //get the reference of first column cell = grid.rows[i].cells[0]; //loop according to the number of childNodes in the cell for (j = 0; j < cell.childNodes.length; j++) { //if childNode type is CheckBox if (cell.childNodes[j].type == "checkbox") { //assign the status of the Select All checkbox to the cell checkbox within the grid cell.childNodes[j].checked = document.getElementById(id).checked; } } } } } </script> <asp:GridView runat="server" ID="gvEmpdetails" DataSourceID="EmpDetails" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" OnRowDataBound="gvEmpdetails_RowDataBound"> <RowStyle BackColor="#EFF3FB" /> <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> <Columns> <asp:TemplateField> <HeaderTemplate> <asp:CheckBox runat="server" ID="chkhead" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="chk" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="EmpName" HeaderText="EmpName" SortExpression="EmpName" /> <asp:BoundField DataField="EmpSal" HeaderText="EmpSal" SortExpression="EmpSal" /> <asp:BoundField DataField="EmpBranch" HeaderText="EmpBranch" SortExpression="EmpBranch" /> <asp:BoundField DataField="EmpCode" HeaderText="EmpCode" SortExpression="EmpCode" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="EmpDetails" runat="server" ConnectionString="<%$ ConnectionStrings:CustomerConnectionString %>" SelectCommand="SELECT [EmpName], [EmpSal], [EmpBranch], [EmpCode] FROM [Employee]"> </asp:SqlDataSource> |
</asp:Content>
Emp.aspx.cs:
Here in the code behind page call the javascript function in the Rowdatabound event as follows
protected void gvEmpdetails_RowDataBound(object sender, GridViewRowEventArgs e)
{
//This condition is used to check RowType is Header
if (e.Row.RowType == DataControlRowType.Header)
{
for (int i = 0; i < gvEmpdetails.Columns.Count; i++)
{
e.Row.Cells[i].ToolTip = gvEmpdetails.Columns[i].HeaderText;
}
}
if (e.Row.RowType == DataControlRowType.Header)
{
//Find the checkbox control in header and add an attribute
CheckBox chk = (CheckBox)e.Row.FindControl("chkhead");
chk.Attributes.Add("onclick", "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("chkhead")).ClientID + "')");
}
}
Subscribe to:
Post Comments (Atom)
0 Responses to “Check And UnCheck CheckBoxes in the Gridview Using Javascript”
Post a Comment