In this post
I will Explain How
to select\Deselect or check\Uncheck CheckBox in GridView using JavaScript.
Design your
page as given below:-
Default.aspx:-
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
// function
to check header checkbox
function
checkAllCheckBoxHeader(headerCheck) {
var
gvEmp = document.getElementById("GridView1");
if
(headerCheck.checked ) {
for
(var i = 0; i < gvEmp.rows.length; i++) {
var
check = gvEmp.rows[i].getElementsByTagName("input");
check[0].checked = true;
}
}
else
{
for
(var i = 0; i <= gvEmp.rows.length; i++) {
var
check = gvEmp.rows[i].getElementsByTagName("input");
check[0].checked = false;
}
}
}
// code
for checking child checkbox
function checkChildCheckBox(childCheck) {
var
gvEmp = document.getElementById("GridView1");
var
headerCheck = document.getElementById(childCheck);
var
count = 0;
var
rowCount = gvEmp.rows.lenght;
for (i = 1; i
< gvEmp.rows.lenght;i++) {
var
check = gvEmp.rows[i].getElementsByTagName("input");
if(check[0].checked)
{
count++;
}
}
if
(count == rowCount - 1) {
headerCheck.checked = true;
}
else
{
headerCheck.checked = false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
AllowSorting="True" onrowdatabound="GridView1_RowDataBound"
AllowPaging="True" CellPadding="4" ForeColor="#333333" GridLines="None"
PageSize="5">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate >
<asp:CheckBox ID="chkHeader" runat="server" onclick="checkAllCheckBoxHeader(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkChild" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="user_name" HeaderText="user_name"
SortExpression="user_name" ReadOnly="true" />
<asp:BoundField DataField="password" HeaderText="password"
SortExpression="password" ReadOnly="true" />
<asp:BoundField DataField="country" HeaderText="country"
SortExpression="country" />
<asp:BoundField DataField="email" HeaderText="email" SortExpression="email" />
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$
ConnectionStrings:modiConnectionString %>"
SelectCommand="SELECT * FROM [user_registration]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
Page
behind code…
Default.aspx.cs:-
protected
void GridView1_RowDataBound(object sender, GridViewRowEventArgs
e)
{
if
(e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox
headerCheck =(CheckBox)GridView1.HeaderRow.FindControl("chkHeader");
CheckBox
childCheck = (CheckBox)e.Row.FindControl("chkChild");
childCheck.Attributes.Add("onclick", "checkChildCheckBox('"
+ headerCheck.ClientID+ "')");
}
}
Debug code
and Run.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.