Step 1:- (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function HeaderCheckBox(headerChk)
{
var gridChk
= document.getElementById('<%=GridView1.ClientID %>');
var inputs;
var amount
= 0;
var totalAmount
= 0;
var amountEnteredChk
= 0;
amountEnteredChk = parseFloat(document.getElementById('<%=txtAmountEntered.ClientID %>').value);
//Condition
to check the header checkbox selected or not if that is true checked all
checkboxes
if (headerChk.checked)
{
for (var i =
1; i < gridChk.rows.length; i++) {
inputs = gridChk.rows[i].getElementsByTagName('input');
amount = gridChk.rows[i].cells[4];
if (amountEnteredChk
> 0) {
if (totalAmount
<= parseFloat(amountEnteredChk)) {
inputs[0].checked = true;
totalAmount += parseFloat(amount.childNodes[0].data);
}
else {
inputs[0].checked = false;
}
}
else {
inputs[0].checked = true;
totalAmount
+= parseFloat(amount.childNodes[0].data);
}
}
document.getElementById('<%=txtToalAmount.ClientID %>').innerText
= totalAmount;
document.all('<%=txtToalAmount.ClientID %>').focus();
}
//if the
condition fails uncheck all checkboxes in gridview
else {
for (var i =
0; i < gridChk.rows.length; i++) {
inputs = gridChk.rows[i].getElementsByTagName('input');
inputs[0].checked = false;
}
document.getElementById('<%=txtToalAmount.ClientID %>').value
= "0";
document.getElementById('<%=txtAmountEntered.ClientID%>').value
= "0";
}
return totalAmount;
}
//function
to checked the header checkbox based on child checkboxes selection
function ChildCheckBox(childChk)
{
var gridChk
= document.getElementById('<%=GridView1.ClientID %>');
var headerChk
= document.getElementById(childChk);
var count
= 0;
var amount;
var totalAmount
= 0;
var amountEnteredChk
= 0;
amountEnteredChk = parseFloat(document.getElementById('<%=txtAmountEntered.ClientID %>').value);
//By using
this for loop, we will count how many checkboxes has checked
for (var i =
1; i < gridChk.rows.length; i++) {
var inputs
= gridChk.rows[i].getElementsByTagName('input');
if (inputs[0].checked)
{
count++;
amount = gridChk.rows[i].cells[4];
totalAmount += parseFloat(amount.childNodes[0].data);
}
}
document.getElementById('<%=txtToalAmount.ClientID %>').innerText
= totalAmount;
document.all('<%=txtToalAmount.ClientID %>').focus();
//Check
all child checkboxes selected or not. If yes, select the header checkbox else
unselect
if (count
=== gridChk.rows.length) {
headerChk.checked = true;
}
else {
headerChk.checked = false;
}
return totalAmount;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Enter Paying Amount :
<br />
<asp:TextBox ID="txtAmountEntered" runat="server">0</asp:TextBox>
<br />
Total Amount :
<br />
<asp:TextBox ID="txtToalAmount" runat="server"></asp:TextBox>
</div>
<div>
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="Both"
OnRowDataBound="GridView1_RowDataBound">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkHeader" runat="server" onclick="javascript:HeaderCheckBox(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkChild" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sr
No">
<ItemTemplate>
<asp:Label ID="lblSrNo" runat="server" Text='<%#Container.DataItemIndex+1 %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Step
2:- (Default.aspx.cs)
using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Demo
{
public partial class Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindDataToGridView();
}
}
protected void BindDataToGridView()
{
DataTable dt
= new DataTable();
DataRow dr;
dt.Columns.Add(new DataColumn("Column1", typeof(string)));
dt.Columns.Add(new DataColumn("Column2", typeof(string)));
dt.Columns.Add(new DataColumn("Amount", typeof(string)));
int totalRow
= 10;
for (int i =
0; i < totalRow; i++)
{
dr = dt.NewRow();
dr["Column1"] = "Row" + i;
dr["Column2"] = "Row" + i;
dr["Amount"] = 5000 / (i + 2);
dt.Rows.Add(dr);
}
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType
== DataControlRowType.DataRow)
{
var headerChk
= (CheckBox)GridView1.HeaderRow.FindControl("chkHeader");
var childChk
= (CheckBox)e.Row.FindControl("chkChild");
childChk.Attributes.Add("onclick", "javascript:ChildCheckBox('" +
headerChk.ClientID + "')");
}
}
}
}
Summary:-
1. Enter
the amount in Enter Paying Amount TextBox
2. Click
the grid view header checkbox.
3. Nearly
figure amount checkbox has been checked.
4. Click
the grid view header to un-check all checkboxes.
5. Click
the row checkbox.
6. Based
on our selection grid view checkbox, the Total Amount TextBox showing
total amount.
Example:-
No comments:
Post a Comment