Stack DotNet

Introduction: In this post i will explain how to add javascript calculation in grid view item templates.
This is very impartant feature in grid view to do client side calculation on cell value changed.

Down Load Source code here.

Using The Code:

Here i am explaining client side calulation by taking a example for calculating variance with projected and actual amount in Gridview.

For clientside calculation first i need to add onchange client side event on Projected textxbox.

There are main three areas in this example. Code behind code, ASPX code and Java script.Below is the code behind file of default.aspx file.

In Data Table I have taken 2 fields only projected and actual while variance is calculated field when ever user will change the projected value then variance will automatically changed. I have added onchenge event on projected textbox at rowdatabound event of gridview also assigning the values of other lables.
I have passed the projected textbox Client Id , Variance Label client Id and actual value.

Using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

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

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

BindGrid();

}

private void BindGrid()

{

DataTable table = GetData();

grdClient.DataSource = table;

grdClient.DataBind();

}

private static DataTable GetData()

{

DataTable table = new DataTable();

table.Columns.Add("Projected", typeof(decimal));

table.Columns.Add("Actual", typeof(decimal));

table.Rows.Add(12345, 23444);

table.Rows.Add(34343, 3425);

table.Rows.Add(46565, 34327);

table.Rows.Add(76767, 458940);

table.Rows.Add(23577, 2356);

table.Rows.Add(575756, 4435);

return table;

}

protected void grdClient_RowDataBound(object sender, GridViewRowEventArgs e)

{

decimal projected = 0;

decimal actual = 0;

decimal variance = 0;

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

{

if (DataBinder.Eval(e.Row.DataItem, "Projected").ToString() != "")

projected = Convert.ToDecimal(DataBinder.Eval(e.Row.DataItem, "projected"));

else

projected = 0;

if (DataBinder.Eval(e.Row.DataItem, "Actual").ToString() != "")

actual = Convert.ToDecimal(DataBinder.Eval(e.Row.DataItem, "Actual"));

else

actual = 0;

variance = projected - actual;

Label lblact = (Label)e.Row.FindControl("lblActual");

Label lblvar = (Label)e.Row.FindControl("lblVariance");

lblact.Text = actual.ToString();

lblvar.Text = variance.ToString();

TextBox txtprojected = (TextBox)e.Row.FindControl("txtprojected");

txtprojected.Text = projected.ToString();

txtprojected.Attributes.Add("onchange", "CalculateVariance(" + actual + " ,'" + txtprojected.ClientID + "','" + lblvar.ClientID + "')");

}

Now I am showing the Gridview code of sample.

<asp:GridView ID="grdClient" runat="server" AutoGenerateColumns="false" OnRowDataBound ="grdClient_RowDataBound">

<asp:TemplateField HeaderText="Projected">

<asp:TextBox ID="txtprojected" runat="server">

</asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Actual">

<asp:Label ID="lblActual" runat="server">

</asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Varaince">

<asp:Label ID="lblVariance" runat="server">

</asp:Label>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

Finally the java script code where I am doing client side calculation on change of projected value also assigning the changed variance in variance label.

function CalculateVariance(ActualPrice, ProjectId, VarianceId) {

var projectId = document.getElementById(ProjectId).value;

var variance = parseFloat(projectId - ActualPrice);

var varianceId = document.getElementById(VarianceId);

varianceId.innerHTML = variance;

}

</script>