In this post we are going to see how to check/uncheck check
boxes in the row, when the Header Row check box checked/unchecked. This is the most common scenario for all the programmers. The
below code works fine with the grid view where the pagination is disabled.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
//Check All Check Boxes when Header Check Box Checked
function checkAllCheckbox(objHeaderCheckBox) {
// Get the table object
var objTable = document.getElementById('gview');
// Get the Row count
var rowCount = objTable.rows.length;
for (var i = 0; i < rowCount; i++) {
//Get the First Cell of Each Row
cell = objTable.rows[i].cells[0];
// Check that First Cell contains Check box or not
if (cell.childNodes[0].type == "checkbox") {
cell.childNodes[0].checked = objHeaderCheckBox.checked;
}
}
}
// Used to check Header Checkbox when any one of the check box checked in the row
function checkHeader(objHeaderCheckBox) {
var blnAtleastOneCheckboxChecked = false;
// Get the table object
var objTable = document.getElementById('gview');
// Get the Row count
var rowCount = objTable.rows.length;
for (var i = 1; i < rowCount; i++) {
//Get the First Cell of Each Row
cell = objTable.rows[i].cells[0];
// Check that First Cell contains Check box or not
if (cell.childNodes[0].type == "checkbox") {
// If any one check box checked
// Check the Header Checkbox and exit from the loop
if (cell.childNodes[0].checked) {
objHeaderCheckBox.checked = true;
blnAtleastOneCheckboxChecked = true;
return;
}
}
}
// if None of the check box checked, uncheck the Header Checkbox
if (!blnAtleastOneCheckboxChecked)
objHeaderCheckBox.checked = false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gview" runat="server" AutoGenerateColumns="false" DataKeyNames="Name"
AllowPaging="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox runat="server" ID="chkHeader" onclick="checkAllCheckbox(this)" AutoPostBack="false"
Text="Select" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox runat="server" ID="chkSelect" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Name" DataField="Name" />
<asp:BoundField HeaderText="Age" DataField="Age" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
ASPX.VB Code:
Imports System.Data
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Try
Dim dt As New DataTable
If Not IsPostBack Then
dt = pvtCreateDatatable()
gview.DataSource = dt
' Store it on Session
Session("datasrc") = dt
gview.DataBind()
Else
dt = Session("datasrc")
gview.DataSource = dt
gview.DataBind()
End If
Catch ex As Exception
End Try
End Sub
' Create a Temp Data Table with Some Data Rows
Private Function pvtCreateDatatable() As DataTable
Dim dt As New DataTable
Dim dcSelect As New DataColumn
dcSelect.ColumnName = "chkSelect"
dcSelect.DataType = GetType(Boolean)
dcSelect.DefaultValue = True
dt.Columns.Add(dcSelect)
Dim dcName As New DataColumn
dcName.ColumnName = "Name"
dcName.DataType = GetType(String)
dt.Columns.Add(dcName)
Dim dcAge As New DataColumn
dcAge.ColumnName = "Age"
dcAge.DataType = GetType(Integer)
dt.Columns.Add(dcAge)
Dim dr As DataRow = dt.NewRow
dr.Item("Name") = "Vijay"
dr.Item("Age") = 20
dt.Rows.Add(dr)
dr = dt.NewRow
dr.Item("Name") = "Francis"
dr.Item("Age") = 25
dt.Rows.Add(dr)
dr = dt.NewRow
dr.Item("Name") = "Subha"
dr.Item("Age") = 27
dt.Rows.Add(dr)
dr = dt.NewRow
dr.Item("Name") = "Subin"
dr.Item("Age") = 2
dt.Rows.Add(dr)
Return dt
End Function
Protected Sub gview_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gview.RowDataBound
Try
' Check that row is a data row Not ROW Header
If e.Row.RowType = DataControlRowType.DataRow Then
' Identify the Header Column
Dim chkHeader As CheckBox = gview.HeaderRow.FindControl("chkHeader")
' Find the Child Checkbox
Dim chk As CheckBox = e.Row.FindControl("chkSelect")
' Attach the "OnClick" event
chk.Attributes.Add("onclick", "checkHeader(" + chkHeader.ClientID + ")")
End If
Catch ex As Exception
End Try
End Sub
End Class
Hope this helps!
0 comments :