Category >
ASP.NET
|| Published on :
Monday, December 14, 2015 || Views:
9826
||
sum the value of gridview column using jquery in asp.net gridview column sum gridview column add
Introduction
Here Pawan Kumar will explain how to How to sum the value of gridview column using jquery in asp.net with example
Description
In previous post I have explained
How to Download Json Data from URL in Asp.Net using C sharp,
How to create draw a doughnut chart using ChartJS in Asp.net detailed Example,
Code Snippet for Deleting a SQL Server stored procedure,
Bootstrap style DropDownList example in ASP.Net,
Set DropDownList value based on text/value in jQuery,
How to change some text before it is sent to the client in asp.net with example, and many more articles.
Now I will explain How to How to sum the value of gridview column using jquery in asp.net with example
So follow the steps to learn How to sum the value of gridview column using jquery in asp.net with example
Step 1: First, We start by creating an Empty asp.net web site in Visual Studio .NET 2013.
Step 2: Add a new web page name "Default.aspx" with the following codes:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<script src="Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var total;
//Column index value of price field (Column index start from 1)
var columnIndexValue = 4;
var checked = $('input:checkbox').click(function (e) {
var total = 0.0;
$("tr:has(:checkbox:checked) td:nth-child(" + columnIndexValue + ")").each(function () {
total += parseFloat($(this).text());
});
$('#Sum').text("your total is:" + total.toFixed(2));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdItems" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkItem" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="label2" Text='<%#Eval("Name") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:Label ID="Label1" Text='<%#Eval("Quantity") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<asp:Label ID="Label2" Text='<%#Eval("Price") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="Sum">
</div>
<br />
<p> More asp.net source codes, tutorials etc : www.SourceCodeHub.com</p>
</form>
</body>
</html>
Step 3: Add the below codes in code behind of the "Default.aspx" file:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
// more asp.net source codes, tutorials : www.sourcecodehub.com
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
grdItems.DataSource = new Item().Items;
grdItems.DataBind();
}
public class Item
{
public string Name { get; set; }
public int Quantity { get; set; }
public decimal Price { get; set; }
public List<Item> Items
{
get
{
return new List<Item>()
{
new Item(){Name = "Item01",Quantity = 10,Price = 80M},
new Item(){Name = "Item01",Quantity = 20,Price = 84M},
new Item(){Name = "Item01",Quantity = 30,Price = 90M},
new Item(){Name = "Item01",Quantity = 50,Price = 10M},
};
}
}
}
}
Step 4: Run the application by pressing F5
Step 5: Screenshot will be shown below:-
Conclusion:
So, In this tutorial we have learned, How to sum the value of gridview column using jquery in asp.net with example
Download Source Codes