Angular 8 & .Net tutorials: Grid view with javascript to find Sum of Salaries in Dollars format

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewBoundFields.aspx.cs"

Inherits="testtextbox.GridViewBoundFields" %>

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

<%--for Setting the currency format reference : http://code.google.com/p/jquery-formatcurrency/--%>

$(document).ready(function () {

//On blur event set the currency format for the class='currency' elements

$('.currency').blur(function () {

SetCurrencyFormat();

});

//Calculate the Sum on keyUp

CalculateSum();

//Set the currency format

SetCurrencyFormat();

});

</script>

//Get the bounded values of the GridView Row

function GetGridValues(rowindex, column1, column2, column3, column4) {

var txtDetails = $("[id$='txtDetails']");

var gridvalues = "RowIndex=" + rowindex + "\r\nEmployee ID= " + column1 + "\r\nEmployee Name = " + column2 + "\r\nEmployee Department = " + column3 + "\r\nEmployee Salary = " + column4;

txtDetails.text(gridvalues);

}

//To Set the Currency Format

function SetCurrencyFormat() {

$('.currency').formatCurrency();

}

//Amount Entered in the textboxes is Summed upon "onkeyup" Event

function CalculateSum() {

var rows = $('#GridView1').children("tbody:first").children("tr");

var Salary = rows.children("td:nth-child(4)"); //column no 4

var tot = 0.00;

Salary.each(function () {

var sum = $(this).find("input").val();

//Replace "$"(dollar) with empty string

sum = sum.replace("$", '');

//Replace n no of ","(camas) with empty string

sum = sum.replace(/,/g, '');

if (isNaN(sum)) {

alert(sum + ' is not a number');

}

else {

if (sum == "") {

sum = 0;

}

tot += parseFloat(sum);

}

});

//Display the total sum of salaries to "txttotal" control

$("[id$='txttotal']").val(tot);

//Set the currency format to the textbox control

$("[id$='txttotal']").formatCurrency();

}

//Text Entered in Total Amount is Distributed Equally into all Employees

function DistributeAmount() {

var rows = $('#GridView1').children("tbody:first").children("tr");

//here rows count is except Header row (count-1)

//if header row and footer row then (1+1)=(count-2)

var rowCount = rows.length - 1;

var Salary = rows.children("td:nth-child(4)"); //column no 4

var sum = $("[id$='txttotal']").val();

//Replace "$"(dollar) with empty string

sum = sum.replace("$", '');

//Replace n no of ","(camas) with empty string

sum = sum.replace(/,/g, '');

var tot = 0;

Salary.each(function () {

if (isNaN(sum)) {

alert(sum + ' is not a number');

}

else {

if (sum == "") {

sum = 0;

}

var distVal = sum / rowCount;

$(this).find("input").val(distVal.toFixed(2));

}

});

SetCurrencyFormat();

}

</script>

</head>

<body>

<div>

<asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">

<asp:TemplateField HeaderText="EmployeeID">

<asp:Label runat="server" ID="lblempId" Text='<%#Eval("EmployeeID") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Name">

<asp:Label runat="server" ID="lblName" Text='<%#Eval("EmployeeName") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Dept">

<asp:Label runat="server" ID="lblDept" Text='<%#Eval("Department") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Salary">

<asp:TextBox runat="server" ID="txtSalary" Text='<%#Eval("Amount") %>' onkeyup="CalculateSum();"

CssClass="currency"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

Total Amount :

<asp:TextBox runat="server" ID="txttotal" CssClass="currency"></asp:TextBox>

<span><a id="btnDistribute" onclick="DistributeAmount();" href="#">Distribute</a></span>

</div>

<h1>

Employee Details</h1>

<asp:TextBox runat="server" ID="txtDetails" TextMode="MultiLine" Height="118px" Width="254px"></asp:TextBox>

</form>

</body>

</html>

///Code Behind

using System;

using System.Collections.Generic;

using System.Web.UI.WebControls;

namespace testtextbox

{

public class clsEmploye

{

public int EmployeeID { get; set; }

public string EmployeeName { get; set; }

public int Department { get; set; }

public double Amount { get; set; }

}

public class clsDepartment

{

public int DepartmentID { get; set; }

public string DepartmentName { get; set; }

}

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

{

protected void Page_Load(object sender, EventArgs e)

{

BindGrid();

}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

//Second Step

if (e.Row.RowType == DataControlRowType.DataRow)

{

int itemIdex = e.Row.DataItemIndex;

string ControlID = e.Row.ID;

int rowIndex = e.Row.RowIndex;

DataControlRowState rowstate = e.Row.RowState;

DataControlRowType rowState = e.Row.RowType;

Label lblempId = (Label)e.Row.Cells[0].FindControl("lblempId");

Label lblName = (Label)e.Row.Cells[1].FindControl("lblName");

Label lblDept = (Label)e.Row.Cells[1].FindControl("lblDept");

TextBox txtSalary = (TextBox)e.Row.Cells[1].FindControl("txtSalary");

string column1value = lblempId.Text;

string column2values = lblName.Text;

string column3values = lblDept.Text;

string column4values = txtSalary.Text;

e.Row.Attributes.Add("onclick", "GetGridValues('" + itemIdex + "','" + column1value + "','" + column2values + "','" + column3values + "','" + column4values + "');");

}

private void BindGrid()

{

IEnumerable<clsEmploye> listDepts = ListEmplyee();

GridView1.DataSource = listDepts;

GridView1.DataBind();

}

private List<clsEmploye> ListEmplyee()

{

List<clsEmploye> objListEmp = new List<clsEmploye>();

objListEmp.Add(new clsEmploye { EmployeeID = 1518, EmployeeName = "Venu Gopal", Department = 100, Amount = 1000 });

objListEmp.Add(new clsEmploye { EmployeeID = 1616, EmployeeName = "Patan Dadapeer", Department = 102, Amount = 2000 });

objListEmp.Add(new clsEmploye { EmployeeID = 1589, EmployeeName = "Srinivas", Department = 103, Amount = 3000 });

return objListEmp;

}

OUTPUT:

Angular 8 & .Net tutorials

Tuesday, June 11, 2013

Grid view with javascript to find Sum of Salaries in Dollars format

No comments: