Click here to Skip to main content
15,879,095 members
Please Sign up or sign in to vote.
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
Updated 15-May-12 20:22pm
v2
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.

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
 
Share this answer
 
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
Hi,
Please go through this link:
Selecting / Deselecting all the CheckBoxes Inside a GridView[^]

Your problem will be solved.

All the best.
-AK
 
Share this answer
 
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)
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 :
 
Share this answer
 
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.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900