<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 id="Head1" runat="server">
<title>Demo</title>
</head>
<body onload="AttachListener()">
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" Font-Names="Verdana" ForeColor="#333333" GridLines="None">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type="checkbox" id="chkAll" name="chkAll" onclick="Check(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Category Name">
<ItemTemplate>
<asp:Label ID="lblCategoryName" runat="server" Text = '<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
var counter = 0;
var pattern = '^GridView1';
// Get the checkboxes inside the Gridview which is part of the template column
function GetChildCheckBoxCount()
{
var checkBoxCount = 0;
var elements = document.getElementsByTagName("INPUT");
for(i=0; i<elements.length;i++)
{
if(IsCheckBox(elements[i]) && IsMatch(elements[i].id)) checkBoxCount++;
}
return parseInt(checkBoxCount);
}
// A function that checks if the checkboxes are the one inside the GridView
function IsMatch(id)
{
var regularExpresssion = new RegExp(pattern);
if(id.match(regularExpresssion)) return true;
else return false;
}
function IsCheckBox(chk)
{
if(chk.type == 'checkbox') return true;
else return false;
}
function AttachListener()
{
var elements = document.getElementsByTagName("INPUT");
for(i=0; i< elements.length; i++)
{
if( IsCheckBox(elements[i]) && IsMatch(elements[i].id))
{
AddEvent(elements[i],'click',CheckChild);
}
}
}
function CheckChild(e)
{
var evt = e || window.event;
var obj = evt.target || evt.srcElement
if(obj.checked)
{
if(counter < GetChildCheckBoxCount())
{ counter++; }
}
else
{
if(counter > 0) { counter--; }
}
if(counter == GetChildCheckBoxCount())
{ document.getElementById("chkAll").checked = true; }
else if(counter < GetChildCheckBoxCount()) { document.getElementById("chkAll").checked = false; }
}
function AddEvent(obj, evType, fn)
{
if (obj.addEventListener)
{
obj.addEventListener(evType, fn, true);
return true;
}
else if (obj.attachEvent)
{
var r = obj.attachEvent("on"+evType, fn);
return r;
}
else
{
return false;
}
}
function Check(parentChk)
{
var elements = document.getElementsByTagName("INPUT");
for(i=0; i<elements.length;i++)
{
if(parentChk.checked == true)
{
if( IsCheckBox(elements[i]) && IsMatch(elements[i].id))
{
elements[i].checked = true;
}
}
else
{
elements[i].checked = false;
// reset the counter
counter = 0;
}
}
if(parentChk.checked == true)
{
counter = GetChildCheckBoxCount();
}
}
</script>
if (!Page.IsPostBack)
{
BindData();
}
private void BindData()
{
string connectionString = "Server=localhost;Database=Northwind;Trusted_Connection=true";
SqlConnection myConnection = new SqlConnection(connectionString);
SqlDataAdapter ad = new SqlDataAdapter("SELECT CategoryID, CategoryName FROM Categories", myConnection);
DataSet ds = new DataSet();
ad.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
Tuesday, July 7, 2009
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment