Javacript for Selection CheckBoxes in the Gridview

You can use this tutorial to read the JS for check box operations in grid view... using this you can achieve below.. 1. Select and unselect all checkboxes depends upon the header check box.. 2. Select header based on selection in row chekboxes...

Below I have given you the sample code for checkbox oprations in grid views... using this you can do the below one...

1. Select and unselect all check boxes when select the heder check box..

2.select and unselect header check box based on the row check boxes..

3. Adding ids to hidden field based on the Selection and removing the Id from the hidden when un select the check box...

ASPX Page ...

 

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

<!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>
   </head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Name"
        DataSourceID="SqlDataSource1" Width="425px" Height="138px">
        <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chk_Head" runat="server" onclick="SetChechUnCheck_New('Head', this);"/>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chk_Main" runat="server"  onclick="SetChechUnCheck_New('Body', this);"/>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
            <asp:BoundField DataField="Name" HeaderText="Name" ReadOnly="True" SortExpression="Name" />
            <asp:BoundField DataField="age" HeaderText="age" SortExpression="age" />
            <asp:CheckBoxField DataField="sex" HeaderText="sex" SortExpression="sex" />
            <asp:BoundField DataField="vasanth" HeaderText="vasanth" SortExpression="vasanth" />
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:test_VasanthConnectionString %>"
        SelectCommand="SELECT * FROM [tbl_Name]"></asp:SqlDataSource>
               <asp:HiddenField ID="hid_Ids" runat="server" />
    </div>
    </form>
</body>
</html>

and Js function as....
function SetChechUnCheck_New(chkType, con)
{
    //get the table element
    var tbl = document.getElementById('GridView1');
    var hid_Text = "";
    //check whether the selected check box is header or body
    if(chkType == 'Head')
    {
        document.getElementById("hid_Ids").value = "";
        //assign check box .....
        var tbl_Header_Chk =  con;
        //loop through the table rows
        for(var i = 1; i< tbl.rows.length;i++)
        {
             var tbl_row = tbl.rows[i];
            //find the table cell in chich check box is available
             var tbl_Cell = tbl_row.cells[0]; // we can change 0 to any cell
             var tbl_Cell_Chk;
             //loop through the cell's controls and find the checkbox
             for(var x = 0; x<tbl_Cell.childNodes.length;x++)
             {
                if(tbl_Cell.childNodes[x].type == "checkbox")
                {
                    tbl_Cell_Chk = tbl_Cell.childNodes[x];  
                }
             }
             //set the check boxes checked state is true
             tbl_Cell_Chk.checked = tbl_Header_Chk.checked;
            
             if(tbl_Header_Chk.checked == true)
             {
                var tbl_cell_Id = tbl.rows[i].cells[1];
                if(hid_Text != "")
                {
                    hid_Text = hid_Text + "," + tbl_cell_Id.innerHTML;
                } 
                else
                {
                    hid_Text = tbl_cell_Id.innerHTML;
                }
             }
        } 
        document.getElementById("hid_Ids").value = hid_Text; 
    }
    //if the selected check box is body check box
    else
    {
        //get the header cell
        var tbl_HeaderRow = tbl.rows[0];
        var tbl_HeaderCell = tbl_HeaderRow.cells[0];
        var tbl_Header_chk;
        //loop thorugh the header cell and get header checkbox control
         for(var x = 0; x<tbl_HeaderCell.childNodes.length;x++)
         {
            var temp = tbl_HeaderCell.childNodes[x];
            if(tbl_HeaderCell.childNodes[x].type == "checkbox")
            {
                tbl_Header_chk = tbl_HeaderCell.childNodes[x];  
            }
         }
       var chk_Cell = con.parentElement.parentElement.cells[1];
       var Id = chk_Cell.innerHTML;
        //check whether the selected check box is checked or not....
        if(con.checked == false)
        {
            //if unchecked set the header check box to false straigtaway
            tbl_Header_chk.checked = false;
            var arrIds = Array();
            arrIds = document.getElementById("hid_Ids").value.split(",");
            for(var i = 0;i<arrIds.length;i++)
            {
                if(arrIds[i] == Id)
                {
                    arrIds[i] = null;
                    break;
                }
            }
           
            for(var i = 0;i<arrIds.length;i++)
            {
                if(arrIds[i] != null)
                {
                    if(hid_Text != "")
                    {
                        hid_Text = hid_Text + "," + arrIds[i];
                    } 
                    else
                    {
                        hid_Text = arrIds[i];
                    }
                }
            }
        }
        //the selected checkbox is checked
        else
        {
            var IsChecked = false;
            //this is temp variable is used to
            var tempCount = 0;
            //loop through the table rows and check whether all the check boxes are checked....
            for(var i = 1; i< tbl.rows.length;i++)
            {
                 var tbl_row = tbl.rows[i];
                 var tbl_Cell = tbl_row.cells[0];
                 var tbl_Cell_Chk;
                 //loop through the controls in cells and set the check box control
                 for(var x = 0; x<tbl_Cell.childNodes.length;x++)
                 {
                    if(tbl_Cell.childNodes[x].type == "checkbox")
                    {
                        tbl_Cell_Chk = tbl_Cell.childNodes[x];  
                    }
                 }
                
                 //if checkbox  is checked increase the count by 1....
                 if(tbl_Cell_Chk.checked == true)
                 {
                    tempCount = tempCount + 1;
                 }
            } 
            if(tempCount ==  tbl.rows.length - 1)
            {
                tbl_Header_chk.checked = true;
            }
            else
            {
                tbl_Header_chk.chekced = false;
            }
            hid_Text = document.getElementById("hid_Ids").value;
            if(hid_Text != "")
            {
                hid_Text = hid_Text + "," + Id;
            } 
            else
            {
                hid_Text = Id;
            }
        }
         document.getElementById("hid_Ids").value = hid_Text;  
       }
}

By Vasanthakumar D   Popularity  (3573 Views)