<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ImplementsCheckBoxesUsingJS.aspx.vb" Inherits="WebApplication1.ImplementsCheckBoxesUsingJS" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type = "text/javascript">
function Check_Click(objRef)
{
//Get the Row based on checkbox
var row = objRef.parentNode.parentNode;
if(objRef.checked)
{
//If checked change color to Aqua
row.style.backgroundColor = "aqua";
}
else
{
//If not checked change back to original color
if(row.rowIndex % 2 == 0)
{
//Alternating Row Color
row.style.backgroundColor = "#C2D69B";
}
else
{
row.style.backgroundColor = "white";
}
}
//Get the reference of GridView
var GridView = row.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i=0;i<inputList.length;i++)
{
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if(inputList[i].type == "checkbox" && inputList[i] != headerCheckBox)
{
if(!inputList[i].checked)
{
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
</script>
<script type = "text/javascript">
function checkAll(objRef)
{
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i=0;i<inputList.length;i++)
{
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if(inputList[i].type == "checkbox" && objRef != inputList[i])
{
if (objRef.checked)
{
//If the header checkbox is checked
//check all checkboxes
//and highlight all rows
row.style.backgroundColor = "aqua";
inputList[i].checked=true;
}
else
{
//If the header checkbox is checked
//uncheck all checkboxes
//and change rowcolor back to original
if(row.rowIndex % 2 == 0)
{
//Alternating Row Color
row.style.backgroundColor = "#C2D69B";
}
else
{
row.style.backgroundColor = "white";
}
inputList[i].checked=false;
}
}
}
}
</script>
<script type = "text/javascript">
function MouseEvents(objRef, evt)
{
var checkbox = objRef.getElementsByTagName("input")[0];
if (evt.type == "mouseover")
{
objRef.style.backgroundColor = "orange";
}
else
{
if (checkbox.checked)
{
objRef.style.backgroundColor = "aqua";
}
else if(evt.type == "mouseout")
{
if(objRef.rowIndex % 2 == 0)
{
//Alternating Row Color
objRef.style.backgroundColor = "#C2D69B";
}
else
{
objRef.style.backgroundColor = "white";
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<asp:GridView ID="GridView1" runat="server" HeaderStyle-CssClass="header"
AutoGenerateColumns="false" Font-Names="Arial"
OnRowDataBound="RowDataBound"
Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick="checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick="Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="EmpId" DataField="EmpId" />
<asp:BoundField HeaderText="EmpName" DataField="Emp_Name" />
<asp:BoundField HeaderText="EmpAddress" DataField="Emp_Address" />
<asp:BoundField HeaderText="EmpDept" DataField="Emp_Department" />
<%--<asp:BoundField HeaderText="Salary" DataField="Salary" />--%>
<asp:TemplateField HeaderText="Salary">
<ItemTemplate>
<asp:Label ID="lblListPrice" runat="server" Text='<%#Eval("Salary")%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="OtherAllownce">
<ItemTemplate>
<asp:Label ID="lblOtherAllownce" runat="server" Text='<%#Eval("OtherAllownce")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
*****************************VB.NET CODE*************************
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Configuration
Public Class ImplementsCheckBoxesUsingJS
Inherits System.Web.UI.Page
Private con As SqlConnection
Private adap As SqlDataAdapter
Private dt As DataTable
Dim strConnString As String
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
BindGridview()
End If
End Sub
Protected Sub RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes.Add("onmouseover", "MouseEvents(this, event)")
e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event)")
End If
End Sub
Public Sub New()
strConnString = ConfigurationManager.ConnectionStrings("ConStr").ConnectionString
End Sub
Protected Sub BindGridview()
adap = New SqlDataAdapter("select * from EmployeeInformation", strConnString)
dt = New DataTable()
adap.Fill(dt)
GridView1.DataSource = dt
GridView1.DataBind()
End Sub
End Class
**************************Table Descriptions***************************************
CREATE TABLE [dbo].[EmployeeInformation](
[EmpId] [int] NULL,
[Emp_Name] [varchar](max) NULL,
[Emp_Address] [nvarchar](max) NULL,
[Emp_Department] [varchar](max) NULL,
[Salary] [money] NULL,
[OtherAllownce] [money] NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
