Hi Sadia.net,
I have simplified your code.
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>GridView Running and Grand Total JavaScript</title>
<script type="text/javascript">
function CalculateTotals() {
var gv = document.getElementById("<%= myGridView.ClientID %>");
var rows = gv.getElementsByTagName("tr");
var grandTotal = 0;
for (var i = 0; i < rows.length; i++) {
var tds = rows[i].getElementsByTagName("td");
if (rows[i].getElementsByTagName("td").length > 0) {
var price = rows[i].getElementsByTagName("span")[2].innerHTML;
var quantity = rows[i].getElementsByTagName("input")[0].value;
var total = parseFloat(price) * parseFloat(quantity);
rows[i].getElementsByTagName("span")[3].innerHTML = isNaN(total) ? 0 : total;
grandTotal += isNaN(total) ? 0 : total;
}
}
document.getElementById("<%= lblSumTotal.ClientID %>").innerHTML = grandTotal;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Cart" runat="server" Font-Size="X-Large" Text="Your Cart"></asp:Label>
<br />
<asp:GridView ID="myGridView" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="ProductID">
<ItemTemplate>
<asp:Label ID="lblProductID" runat="server" Text='<%#Eval("ProductID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ProductName">
<ItemTemplate>
<asp:Label ID="lblProductName" runat="server" Text='<%#Eval("ProductName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<asp:Label ID="lblPrice" runat="server" Text='<%#Eval("Price") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" runat="server">Delete</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
Sum Total :
<asp:Label ID="lblSumTotal" runat="server"></asp:Label>
</form>
</body>
</html>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.AddRange(new System.Data.DataColumn[] {
new System.Data.DataColumn("ProductID", typeof(int)),
new System.Data.DataColumn("ProductName", typeof(string)),
new System.Data.DataColumn("Price",typeof(int)) });
dt.Rows.Add(1, "Product 1", 10);
dt.Rows.Add(2, "Product 2", 12);
dt.Rows.Add(3, "Product 3", 9);
dt.Rows.Add(4, "Product 4", 15);
myGridView.DataSource = dt;
myGridView.DataBind();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim dt As System.Data.DataTable = New System.Data.DataTable()
dt.Columns.AddRange(New System.Data.DataColumn() {
New System.Data.DataColumn("ProductID", GetType(Integer)),
New System.Data.DataColumn("ProductName", GetType(String)),
New System.Data.DataColumn("Price", GetType(Integer))})
dt.Rows.Add(1, "Product 1", 10)
dt.Rows.Add(2, "Product 2", 12)
dt.Rows.Add(3, "Product 3", 9)
dt.Rows.Add(4, "Product 4", 15)
myGridView.DataSource = dt
myGridView.DataBind()
End If
End Sub
Screenshot
