Buy Questpond's video subscriptions on huge discount.
DotNetFunda.com
Online: 3951
Home > Forums > C# >

Checkbox functionality in gridview using Javascript [Resolved]

Posted by Vijetha under C# on 11/8/2012 | Points: 10 | Views : 14367 | Status : [Member] | Replies : 10
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
Hi All,
I do have a Grid as shown in the attched document.
I have checkbox in the header as well as in the itemtemplate.I need javascript function for the below functionalities.
1.When i check the header checkbox all the child checkboxes should also get checked and when i uncheck the header all the child checkboxes should get unchecked.
2.When any of the child chekbox is unchecked the header checkbox should get unchecked.

Please provide me help ASAP.

Regards,
Vijetha



Reply | Reply with Attachment
Alert Moderator 

Responses

Posted by: Sourabh07 on: 11/8/2012 [Member] Starter | Points: 50

Up
0
Down

Resolved
hi Vijetha.....

Please look the following code....... as i have done changes in your attached file, so do copy it and paste in your design page......... it will help you...


Source Page: 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Event_Bubling.aspx.cs" Inherits="Event_Bubling" %>



<!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" language="javascript">

        function check_all() {



            var gv = document.getElementById("<%= grdSeason.ClientID %>");



            var chkrow;



            if (gv.rows.length > 0) {



                var chk = gv.rows[0].cells[0];



                for (i = 1; i < gv.rows.length; i++) {



                    chkrow = gv.rows[i].cells[0];



                    chkrow.childNodes[0].checked = chk.childNodes[0].checked;

                }



            }



        }



        function check_child() {



            var gv = document.getElementById("<%= grdSeason.ClientID %>");



            var chkrow;



            if (gv.rows.length > 0) {



                var chk = gv.rows[0].cells[0];



                for (i = 1; i < gv.rows.length; i++) {



                    chkrow = gv.rows[i].cells[0];



                    if (chkrow.childNodes[0].checked == false) {

                        chk.childNodes[0].checked = false;

                        break;

                    }

                    else {

                        chk.childNodes[0].checked = true;

                    }

                }



            }



        }

         

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:GridView Width="200px" Height="40px" AutoGenerateColumns="false" CssClass="activity"

            HeaderStyle-CssClass="gridViewHead" ID="grdSeason" AllowSorting="true" runat="server">

            <Columns>

                <asp:TemplateField>

                    <HeaderStyle Width="3px" HorizontalAlign="Center" />

                    <ItemStyle HorizontalAlign="Center" />

                    <HeaderTemplate>

                        <asp:CheckBox ID="chkAllSeason" Checked="true" runat="server" Height="5px" onclick="return check_all();" />

                    </HeaderTemplate>

                    <ItemTemplate>

                        <asp:CheckBox ID="chkSeason" Checked="true" runat="server" onclick="return check_child();" />

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField Visible="false">

                    <HeaderStyle HorizontalAlign="center" />

                    <ItemStyle HorizontalAlign="Left" />

                    <HeaderTemplate>

                        <asp:LinkButton Height="5px" ID="lnkSeasonId" runat="server">Season</asp:LinkButton></HeaderTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblSeason" Height="5px" Visible="false" runat="server" Text='<%# Eval("SEASON")%>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField>

                    <HeaderStyle HorizontalAlign="center" />

                    <ItemStyle HorizontalAlign="Left" />

                    <HeaderTemplate>

                        <asp:LinkButton Height="5px" ID="lnkSeasonName" runat="server">Season Name</asp:LinkButton></HeaderTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblSeasonName" Height="5px" runat="server" Text='<%# Eval("SEASON_NME")%>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

    </div>

    </form>

</body>

</html>


Sourabh07

Vijetha, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Saratvaddilli on: 11/8/2012 [Member] [MVP] Bronze | Points: 25

Up
0
Down

ya we can achieve that one using java script once go through these articles
http://www.dotnetfunda.com/articles/article85.aspx
http://www.codeproject.com/Articles/11207/Selecting-multiple-checkboxes-inside-a-GridView-co

Hope it helps You

Thanks and Regards
V.SaratChand
Show difficulties that how difficult you are

Vijetha, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Saratvaddilli on: 11/8/2012 [Member] [MVP] Bronze | Points: 25

Up
0
Down
Go through this article having some sample code
http://chikkanti.wordpress.com/2011/10/23/select-all-checkbox-in-gridview/

Thanks and Regards
V.SaratChand
Show difficulties that how difficult you are

Vijetha, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Vijetha on: 11/8/2012 [Member] Starter | Points: 25

Up
0
Down
Saratvaddilli,
Thanks For the effort.
These code helps in checking the child checkbox if header checkbox is selected and on unchecking the header checkbox the child ceheckboxes are getting unchecked.
But my second requirement is not satisfied with the refered codes mentioned by you.
Kindly provide me the code to satisfy both the rquirements.

Vijetha, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Saratvaddilli on: 11/8/2012 [Member] [MVP] Bronze | Points: 25

Up
0
Down
This will help you more better
http://www.codeproject.com/Tips/422713/Check-all-checkboxes-in-GridView-using-jQuery
http://stackoverflow.com/questions/11793847/check-parents-of-child

Thanks and Regards
V.SaratChand
Show difficulties that how difficult you are

Vijetha, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Sourabh07 on: 11/8/2012 [Member] Starter | Points: 25

Up
0
Down
hi..

Checkbox functionality in gridview using Javascript...

As I have covered your all points in the following code....so..do check it all and send your response....

Source Page: 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Event_Bubling.aspx.cs" Inherits="Event_Bubling" %>



<!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" language="javascript">

         function check_all() {

             

             var gv = document.getElementById("<%= gv.ClientID %>");



             var chkrow;

             

             if (gv.rows.length > 0) {



                 var chk = gv.rows[0].cells[2];

                 

                 for (i = 1; i < gv.rows.length; i++) {



                     chkrow = gv.rows[i].cells[2];



                     chkrow.childNodes[0].checked = chk.childNodes[0].checked;

                 }



             }



         }



         function check_child() {



             var gv = document.getElementById("<%= gv.ClientID %>");



             var chkrow;



             if (gv.rows.length > 0) {



                 var chk = gv.rows[0].cells[2];



                 for (i = 1; i < gv.rows.length; i++) {



                     chkrow = gv.rows[i].cells[2];



                     if (chkrow.childNodes[0].checked == false) {

                         chk.childNodes[0].checked = false;

                         break;

                     }

                     else {

                         chk.childNodes[0].checked = true;

                     }

                 }



             }



         }

         

     </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">

            <Columns>

                <asp:TemplateField HeaderText="S.No" HeaderStyle-HorizontalAlign="Center">

                    <ItemTemplate>

                        <%# Container.DataItemIndex + 1 %>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField HeaderText="TextBox">

                    <ItemTemplate>

                        <asp:TextBox ID="txt" runat="server"></asp:TextBox>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField HeaderText="CheckBox">

                    <HeaderTemplate>

                        <asp:CheckBox ID="chkheader" runat="server" onclick="return check_all();" />

                    </HeaderTemplate>

                    <ItemTemplate>

                        <asp:CheckBox ID="chk" runat="server" onclick="return check_child();"/>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

    </div>

    </form>

</body>

</html>


Code Behind Page: 

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;



public partial class Event_Bubling : System.Web.UI.Page

{



    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

            BindGrid();

    }



    void BindGrid()

    {

        DataTable dt = new DataTable();

        DataRow dr;



        for (int i = 0; i < 10; i++)

        {

            dr = dt.NewRow();

            dt.Rows.Add(dr);

        }



        gv.DataSource = dt;

        gv.DataBind();

    }



   

}


Sourabh07

Vijetha, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Vijetha on: 11/8/2012 [Member] Starter | Points: 25

Up
0
Down
Its not working as expected.Please see the code that i have attached when i posted for design and Pls give me the code.Its very urgent.

Vijetha, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Sourabh07 on: 11/8/2012 [Member] Starter | Points: 25

Up
0
Down
hi...Vijetha

please refer the second one.....

it works.....

It is done as an example....

do change in your code...accordingly.....by taking it into your mind.....


if you want the code.....in the similar way the grid you want to use..then let me know....

But i think...if you consider the above post with the code behind page.....

you must be able to do the changes in your code.....accordingly....

Sourabh07

Vijetha, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Vijetha on: 11/8/2012 [Member] Starter | Points: 25

Up
0
Down
Thank you Sourabh..That solved my problem.I was able to complete my requirement.

Vijetha, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Sourabh07 on: 11/8/2012 [Member] Starter | Points: 25

Up
0
Down
hi...Vijetha

Your welcome........and thanx to mark it as an answer too.....:-)

Sourabh07

Vijetha, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response

Latest Posts