Example of Header Checkbox

Example of Header Check box in GridView Control:

In this post we consider a Example in asp.net programming language.Here we consider a list if friend with check box in Grid view and one header check box also.this header check box work as controller means if you select header check box then auto select all rows check box and when unchecked then all unchecked automatically .

Check box in GridView Control

<asp:GridView ID="Grid_All" runat="server" AutoGenerateColumns="False" Width="100%" DataSourceID="SqlDataSource1" EnableModelValidation="True">

<asp:TemplateField HeaderText="Select">

<asp:CheckBox ID="chkBxSelect" runat="server" />

</ItemTemplate>

<asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />

</HeaderTemplate>

</asp:TemplateField>

<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />

<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />

</Columns>

</asp:GridView>

Example of Window.onload JavaScript function:

var TotalChkBx;

var Counter;

window.onload = function ()

{

//Get total no. of CheckBoxes in side the GridView.

TotalChkBx = parseInt('<%= this.Grid_All.Rows.Count %>');

//Get total no. of checked CheckBoxes in side the GridView.

Counter = 0;

}

</script>

Example of GridView with header checkbox Control:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>checkboxwithinGrid</title>

var TotalChkBx;

var Counter;

window.onload = function () {

//Get total no. of CheckBoxes in side the GridView.

TotalChkBx = parseInt('<%= this.Grid_All.Rows.Count %>');

//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.Grid_All.ClientID %>');

var TargetChildControl = "chkBxSelect";

//Get all the control of the type INPUT in the base control.

var Inputs = TargetBaseControl.getElementsByTagName("input");

//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 base & child 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;

}

</script>

</head>

<body>

<div>

<tr>

</td>

<h1>

<strong>List Of All Friends</strong></h1>

</td>

</td>

</tr>

<tr>

</td>

<tr>

<tr>

<br />

<asp:Label ID="Msg" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>

<br />

<asp:Button ID="btnSubmit" runat="server" Text="Send Request" CssClass="Sam_btn_menu"

Height="38px" onclick="btnSubmit_Click" />

</td>

<asp:GridView ID="Grid_All" runat="server" AutoGenerateColumns="False" RowStyle-HorizontalAlign="Center"

Width="100%" DataSourceID="SqlDataSource1" EnableModelValidation="True">

<asp:TemplateField HeaderText="Select">

<asp:CheckBox ID="chkBxSelect" runat="server" />

</ItemTemplate>

<asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />

</HeaderTemplate>

</asp:TemplateField>

<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />

<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

SelectCommand="SELECT * FROM [Friends]"></asp:SqlDataSource>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

C# code Header Check box in GridView:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

Boolean b = false;

int count = 0;

for (int i = 0; i < Grid_All.Rows.Count; i++)

{

GridViewRow row = Grid_All.Rows[i];

CheckBox chkBxSelect = (CheckBox)row.FindControl("chkBxSelect");

if (chkBxSelect.Checked == true)

{

b = true;

count = count + 1;

}

if (b == false)

{

Msg.Text = "Select at list one....";

}

else

{

Msg.Text = count+" friend Select ";

}

Asp.net checkbox in gridview

Search This Blog

Tutorials Place