How To Add client side calculation for gridview column

[]
In this post, I will show you how to calculate the column sum of GridView using javaScript.

<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="GridViewClientSideCalculation.aspx.cs"  
Inherits="GridViewClientSideCalculation" %>  

<!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 runat="server">  
<title></title>  

<script type="text/javascript">  
function CalcSellPrice2(CurrentPrice, DiscountCtrlID, CustomerCtrlID)  
{  
var Discount= parseFloat(document.getElementById(DiscountCtrlID).value);  
var SellPrice=document.getElementById(CustomerCtrlID);  
var SellPriceValue = parseFloat(CurrentPrice -((CurrentPrice*Discount)/100));  
//var SellPriceValueRound = Math.round(SellPriceValue,4);  
var SellPriceValueRound = SellPriceValue;  
SellPrice.innerHTML= SellPriceValueRound ;  


}  

</script>  

</head>  
<body>  
<form id="form1" runat="server">  
  <div>  
      <asp:GridView ID="GridView1" runat="server"  
AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">  
          <Columns>  
              <asp:TemplateField HeaderText="List Price" Visible="True">  
                  <ItemTemplate>  
                      <asp:Label ID="lblCurrentListPrice" runat="server"  
Text='<%# Eval("Price") %>'></asp:Label>  
                  </ItemTemplate>  
              </asp:TemplateField>  
              <asp:TemplateField HeaderText="Discount">  
                  <ItemTemplate>  
                      <asp:TextBox ID="txtDiscountOnItem" Width="100px"  
runat="Server" />  
                  </ItemTemplate>  
              </asp:TemplateField>  
              <asp:TemplateField HeaderText="Sell Price">  
                  <ItemTemplate>  
                      <asp:Label ID="lblSellPrice" runat="Server" />  
                  </ItemTemplate>  
              </asp:TemplateField>  
          </Columns>  
      </asp:GridView>  
  </div>  
</form>  
</body>  
</html>  
  
using System;  
using System.Data;  
using System.Configuration;  
using System.Collections;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
using System.Web.UI.HtmlControls;  
  
public partial class GridViewClientSideCalculation : System.Web.UI.Page  
{  
 protected void Page_Load(object sender, EventArgs e)  
 {  
     GridView1.DataSource = GetData();  
     GridView1.DataBind();  
  
 }  
 public DataSet GetData()  
 {  
     DataSet ds = new DataSet();  
     DataTable dt = new DataTable("Product");  
     DataRow dr;  
     dt.Columns.Add(new DataColumn("Price", typeof(Int32)));  
     dt.Columns.Add(new DataColumn("DisCount", typeof(Int32)));  
     dt.Columns.Add(new DataColumn("SellPrice", typeof(Int32)));  
     for (int i = 1; i <= 10; i++)  
     {  
         dr = dt.NewRow();  
         dr[0] = i;  
         dr[1] = i * 2;  
         dr[2] = 1 * 3;  
         dt.Rows.Add(dr);  
     }  
     ds.Tables.Add(dt);  
     Session["dt"] = dt;  
     return ds;  
 }  
 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
 {  
     if (e.Row.RowType == DataControlRowType.DataRow)  
     {  
  
         Label lblCurrentListPrice = (Label)e.Row.FindControl("lblCurrentListPrice");  
         Double CurPr = Convert.ToDouble(lblCurrentListPrice.Text);  
         TextBox txtDiscountOnItem = (TextBox)e.Row.FindControl("txtDiscountOnItem");  
         Label lblSellPrice = (Label)e.Row.FindControl("lblSellPrice");  
         txtDiscountOnItem.Attributes.Add("onchange",  
"CalcSellPrice2(" + CurPr + ", '" + txtDiscountOnItem.ClientID + "','"  
+ lblSellPrice.ClientID + "')");  
  
  
     }  
  
 }  
}

Please do not post any spam link in the comment box😊

Post a Comment (0)
Previous Post Next Post