Header checkbox not checking all check boxes in Grid view

Question

0.00/5 (No votes)

See more:

Hi,
my prob is that I am unable to make a functionality through java script where checking on checkbox in header template will check my all check boxes in item template. The id of header checkbox is "chkAll" and item check bx is "chkEmail_Single".

JavaScript

function SelectAll() {
        var frm = document.forms[0];
        

      if(frm.getElementById("chkAll").checked==true )
        {
           if(frm.getElementById("chkEmail_Single").checked==false)
            {
                frm.getElementById("chkEmail_Single").checked();
            }
        }
        else
        {
              frm.getElementsById("").checked=false;
        }
       }

Posted 15-May-12 19:57pm

Taresh Uppal

Updated 15-May-12 20:22pm

TorstenH.

v2

Add a Solution

Comments

Taresh Uppal 16-May-12 1:58am

Please reply Asap , MY boss is waiting for me...:(

TorstenH. 16-May-12 2:22am

changed tag, this is not much Java, it's more kind of JS.

3 solutions

Solution 1

Hi ,
Check this Example
It work Fine Hope it help

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        function SelectAll(id) {
            var frm = document.forms[0];

            for (i = 0; i < frm.elements.length; i++) {
                if (frm.elements[i].type == "checkbox") {
                    if (frm.elements[i].disabled == true) {
                        frm.elements[i].checked = false;
                    }
                    else {
                        frm.elements[i].checked = document.getElementById(id).checked;
                    }
                }
            }
        }
        function unCheck(id) {
            var frm = document.forms[0];
            var paren = document.getElementById(id);
            var flag = true;
            for (i = 0; i < frm.elements.length; i++) {
                if (frm.elements[i].type == "checkbox") {
                    if (!frm.elements[i].checked) {
                        paren.checked = false;
                        if (frm.elements[i] != paren)
                            flag = false;
                    }
                }
            }
            if (flag == true) paren.checked = true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="Gridview1" runat="server"
                        AutoGenerateColumns="False"
                    OnRowDataBound="Gridview1_RowDataBound" AllowPaging="True" >
                        <Columns>
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <asp:CheckBox ID="Chk" runat="server"/>
                                </ItemTemplate>
                                <HeaderTemplate>
                                    <asp:CheckBox ID="Chk1" runat="server" />
                                </HeaderTemplate>
                            </asp:TemplateField>

                            <asp:TemplateField HeaderText="test">
                                <ItemTemplate>
                                    <asp:Label ID="lbl_Val" runat="server" Text='<%# Eval("name") %>' ></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
     <asp:HiddenField ID="HF2" runat="server" />
     <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    </div>
    </form>
</body>
</html>

C#

DataClassesDataContext db = new DataClassesDataContext();
protected void Page_Load(object sender, EventArgs e)
{
    //binding to Grid
    if (!IsPostBack)
    {
        var result = from x in db.test1s
                     select new { x.name };
        Gridview1.DataSource = result;
        Gridview1.DataBind();
    }

}
protected void Gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if ((e.Row.RowType == DataControlRowType.Header))
    {
        HF2.Value = ((CheckBox)e.Row.FindControl("Chk1")).ClientID;
        //adding an attribut for onclick event on the check box in the hearder and passing the ClientID of the Select All checkbox
        ((CheckBox)e.Row.FindControl("Chk1")).Attributes.Add("onclick",
            "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("Chk1")).ClientID + "')");
    }
    else if ((e.Row.RowType == DataControlRowType.DataRow))
    {
        ((CheckBox)e.Row.FindControl("Chk")).Attributes.Add("onclick",
            "javascript:unCheck('" + HF2.Value + "','" + ((CheckBox)e.Row.FindControl("Chk")).ClientID + "')");

    }

}
protected void Button1_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in Gridview1.Rows)
    {
        if ((CheckBox)row.FindControl("Chk") is CheckBox)
        {
            if (((CheckBox)row.FindControl("Chk")).Checked == true)
            {
                Response.Write("<script>alert('" + ((Label)row.FindControl("lbl_Val")).Text + "')</script>");
            }
        }
    }

}

Best Regards
M.Mitwalli

Posted 15-May-12 20:09pm

Mohamed Mitwalli

Updated 16-May-12 0:36am

v2

Comments

Taresh Uppal 16-May-12 2:14am

Hi, Mohammad.... I have done everything....I dnt knw why am not able to do this. I am using a code which is running perfect on another website but not doing the things on my website...

Mohamed Mitwalli 16-May-12 2:58am

Well i believe your problem is solved :)

Taresh Uppal 16-May-12 3:02am

NO Its is not... the new problem is this on checking of check box I am trying to send a email to the respective clients. However now it is not allowing me...I check a checkbox and click on send email it goes to that function of javascript and does not go into for each loop which will pick the email id of selected cell... why this ?

Mohamed Mitwalli 16-May-12 3:06am

Share your code it will be much better

Mohamed Mitwalli 16-May-12 6:37am

Check on your load page if you are using if(!IsPostBack)
Best Regards
M.Mitwalli

Taresh Uppal 16-May-12 3:20am

okie its down there...

Taresh Uppal 16-May-12 3:23am

When i enter into start the loop it takes me to the javascript instead of entering the loop

Solution 3

C#

window.onload = function()
{
   //Get total no. of CheckBoxes in side the GridView.
   TotalChkBx = parseInt('<%= this.gvAllClients.Rows.Count %>');*******<- error here

   //Get total no. of checked CheckBoxes in side the GridView.
   Counter = 0;
}

function HeaderClick(CheckBox)
{
   //Get target base & child control.
   var TargetBaseControl = 
       document.getElementById('<%= this.gvAllClients.ClientID %>');
   var TargetChildControl = "chkEmail_Single";

   //Get all the control of the type INPUT in the base control.
   var Inputs = TargetBaseControl.getElementsByTagName("input");*****<----error than here

   //Checked/Unchecked all the checkBoxes in side the GridView.
   for(var n = 0; n < Inputs.length; ++n)
      if(Inputs[n].type == 'checkbox' && 
                Inputs[n].id.indexOf(TargetChildControl,0) >= 0)
         Inputs[n].checked = CheckBox.checked;

   //Reset Counter
   Counter = CheckBox.checked ? TotalChkBx : 0;
}

function ChildClick(CheckBox, HCheckBox)
{
   //get target control.
   var HeaderCheckBox = document.getElementById(HCheckBox);

   //Modifiy Counter; 
   if(CheckBox.checked && Counter < TotalChkBx)
      Counter++;
   else if(Counter > 0) 
      Counter--;

   //Change state of the header CheckBox.
   if(Counter < TotalChkBx)
      HeaderCheckBox.checked = false;
   else if(Counter == TotalChkBx)
      HeaderCheckBox.checked = true;
}


 protected void btnEmail_Click(object sender, EventArgs e)
    {

        for (int ict = 0; ict < gvAllClients.Rows.Count; ict++)
        {
            CheckBox check = ((CheckBox)(gvAllClients.Rows[ict].FindControl("chkEmail_Single")));
            if (check.Checked = true)
            {
                string strDatatype = gvAllClients.Rows[ict].Cells[5].Text.ToString();
            }
        }
        }

After selection i want to perform some action on the row whose check box is being selected but it takes me to astriek line...see above :

Posted 15-May-12 21:22pm

Taresh Uppal

Comments

[no name] 16-May-12 3:29am

On onload function try finding the element with document.getElementById().

[no name] 16-May-12 3:30am

And go through the flow. Please don't copy and paste entire code. Understand the flow first and then try to use it to solve your problem.

Taresh Uppal 16-May-12 3:33am

Amit sir... i poste dthis so that there are no issues for other developers... moreover..i tried ur suggestion its same issue...

Taresh Uppal 16-May-12 3:41am

I have omitted the '<%= this.gvAllClients.ClientID %>' from document.getElementById() but still on bton click its not entering into the loop, it simply makes the grid view invisible and do nothing.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

AmitKumar89 · Accepted Answer · 2012-05-15T20:10:00

Solution 2

Hi,
Please go through this link:
Selecting / Deselecting all the CheckBoxes Inside a GridView[^]

Your problem will be solved.

All the best.
-AK

Posted 15-May-12 20:10pm

AmitKumar89

Comments

Taresh Uppal 16-May-12 2:24am

Thank you so much..I have seen this post earlier but it was complex so for tym saving I didn't used it. But, Atlast its working. Thanx a Zillion

[no name] 16-May-12 2:36am

Most welcome. :)

[no name] 16-May-12 3:20am

Why Accept and then undo?

Taresh Uppal 16-May-12 3:26am

Amit sir ..Thanx a lot for your help but things arent working they should.. kindly see all the comments between me and Mohammad , You will got to knw my problem... a new issue is there....

Mohamed Mitwalli 16-May-12 6:39am

Check on your load page if you are using if(!IsPostBack)