Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
hi,
 
I have a gridview with header template as "checkbox"
 
and
also have item template as checkbox
 
when
iam selecting header checkbox then all item template checkboxes have to check
 
and
 
if iam deselect header checkbox then all item template checkboxes have to uncheck
 

how can i do this without using javascript
Posted 20-Oct-11 22:13pm
Comments
jaimik patel at 11-Dec-12 0:26am
   
how to use same concept in repeater for check and uncheck checkboxes?
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

 
<script type="text/javascript">
function SelectAll(CheckBoxControl) 
{
if (CheckBoxControl.checked == true) 
{
var i;
for (i=0; i < document.forms[0].elements.length; i++) 
{
if ((document.forms[0].elements[i].type == 'checkbox') && 
(document.forms[0].elements[i].name.indexOf('GridView1') > -1)) 
{
if(document.forms[0].elements[i].disabled)
{
document.forms[0].elements[i].checked = false;
}
else
{
document.forms[0].elements[i].checked = true;
}
}
}
} 
else 
{
var i;
for (i=0; i < document.forms[0].elements.length; i++) 
{
if ((document.forms[0].elements[i].type == 'checkbox') && 
(document.forms[0].elements[i].name.indexOf('GridView1') > -1)) 
{
document.forms[0].elements[i].checked = false;
}
}
}
}
</script>
 

 
<asp:TemplateColumn  >
                                                                 <HeaderTemplate >
                                                                     <input id="chkSelect"  name="Select All"  onclick="SelectAll(this)" type="checkbox">All</input>
                                                                 </HeaderTemplate>
  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

function SelectAllCheckboxes1(chk)
{
$('#<%=grdOperation.ClientID%>').find("input:checkbox").each(function () {
if (this != chk) {this.checked = chk.checked;}
});
}
 

 
<asp:GridView ID="grdOperation" runat="server">
<Columns>
<asp:BoundField DataField="PageOperationName" HeaderText="Permissions" />
<asp:TemplateField ItemStyle-Width="20px">
<HeaderTemplate>
<asp:CheckBox ID="cbSelectAll" runat="server" onclick="javascript:SelectAllCheckboxes1(this);"  />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server">
</asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
  Permalink  
Comments
Member 7932936 at 25-Oct-11 7:15am
   
thank u
 
my problem is solved
nomibarbarian at 24-Jan-12 6:06am
   
Thanks budy that's simple and Ok to go. . .
Wenpeng Wang at 4-Jun-13 1:49am
   
hello,i have a question why i code these codes the error shows"
行 47: }
行 48: //PageTitle = System_Title;
行 49: base.OnInit(e);
行 50: }
行 51: ///
 
stacktrace:
[HttpException (0x80004005): 控件包含代码块(即 <% ... %>),因此无法修改控件集合。]
System.Web.UI.ControlCollection.Add(Control child) +8699175
System.Web.UI.PageTheme.SetStyleSheet() +478
System.Web.UI.Page.OnInit(EventArgs e) +8719932
YWYS.Common.PageBase.OnInit(EventArgs e) in D:\ress\20130507\YWYS.Common\PageBase.cs:49
System.Web.UI.Control.InitRecursive(Control namingContainer) +333
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +378
".how do i do next?
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

Use this code:
 

 
function SelectAll(id)
{
 
var grid = document.getElementById("<%= GridView1.ClientID %>");
//alert(grid);
var cell;
 

    if(grid.rows.length>0)
    {
 
        for(i = 1;i<GridView1.rows.length;i++)
        {
 
          cell = grid.rows[i].cells[2];
 
            for(j=0;j<cell.childNodes.length;j++)
          {
                if(cell.childNodes[j].type=="checkbox")
                {
 
                 cell.childNodes[j].checked=id.checked;
                }
            }
        }
    }
}
 

<asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="Checkall" runat="server"  onclick="javascript:SelectAll(this);" />
                                    </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="Chkselect" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 5

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
 
<!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>Untitled Page</title>
 
 <script type="text/javascript">
// Select/Deselect checkboxes based on header checkbox
function SelectheaderCheckboxes(headerchk) {
 
var gvcheck = document.getElementById('gvEmployeeDetails');
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('gvEmployeeDetails');
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="gvEmployeeDetails" runat="server" AutoGenerateColumns="false" DataKeyNames="userId"
                                        Style="margin-left: 0px" CssClass="fullTable zebraStrips" Width="100%"
                                        AllowPaging="True" PageSize="25" GridLines="Horizontal" >
                                        <Columns>
                                            <asp:TemplateField HeaderText="">
                                                <HeaderTemplate>
                                                    <asp:CheckBox ID="chkheader" runat="server" onclick="javascript:SelectheaderCheckboxes(this)" />
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkchild" runat="server"/>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                            <asp:TemplateField HeaderText="S.No">
                                                <ItemTemplate>
                                                    <asp:Label ID="lblSNo" runat="server" Text='<%#Bind("SNo") %>'></asp:Label>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                            <asp:TemplateField HeaderText="Role ID">
                                                <ItemTemplate>
                                                    <asp:Label ID="lblRoleId" runat="server" Text='<%#Bind("userRoleId") %>'></asp:Label>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                            <asp:TemplateField HeaderText="USer Name">
                                                <ItemTemplate>
                                                    <asp:Label ID="lblUserName" runat="server" Text='<%#Bind("userName") %>'></asp:Label>
                                                </ItemTemplate>
                                            </asp:TemplateField>
 
                                            <asp:TemplateField HeaderText="Edit/Delete" ItemStyle-HorizontalAlign="Center">
                                                <ItemTemplate>
                                                    <asp:LinkButton ID="lnkEdit" runat="server" CommandName="EditThis" Text="Edit" CommandArgument='<%#Bind("userId") %>'></asp:LinkButton>
                                                    &nbsp;
                                                    <asp:LinkButton ID="lnkDelete" runat="server" CommandName="Delete" Text="Delete"
                                                        CommandArgument='<%#Bind("userId") %>' OnClientClick="return confirm('Are you confirm to Delete?')"></asp:LinkButton>
                                                </ItemTemplate>
 
<ItemStyle HorizontalAlign="Center"></ItemStyle>
                                            </asp:TemplateField>
                                        </Columns>
                                         <EmptyDataTemplate>
                                            No Records Fetched!
                                        </EmptyDataTemplate>
                                    </asp:GridView>
    </div>
    </form>
</body>
</html>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 6

  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 7

Hi.
 
to select all checkboxes when you click on the header check box, use the following code
 
$('#headerCheckbox').click(function () {
    var isheaderChecked = this.checked;
    $(".childCheckBox").each(function () {
        this.checked = isChecked;
    })
})
 
but there is one more case here, when you deselect any one of the child checkbox then you have to de select the header checkbox also. For that code please look at this post : http://coding-issues.blogspot.in/2013/10/check-uncheck-all-checkboxes-jquery.html[^]
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 275
1 DamithSL 265
2 CPallini 235
3 Maciej Los 185
4 George Jonsson 170
0 OriginalGriff 5,305
1 DamithSL 4,382
2 Maciej Los 3,760
3 Kornfeld Eliyahu Peter 3,470
4 Sergey Alexandrovich Kryukov 2,901


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 28 Oct 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100