Calculate ASP.Net GridView Running and Grand Total using JavaScript

Last Reply one month ago By dharmendr

Posted one month ago

How to get quantity multiply price in amount textbox in asp.net.

I work on web application web form asp.net AND I need to get qunatity * price and result display on Amount  

<asp:Label ID="Cart" runat="server" Font-Size="X-Large" Text="Your Cart"></asp:Label>
<br />
<asp:GridView ID="myGridView" runat="server" AutoGenerateColumns="False" OnRowCommand="myGridView_RowCommand"
    OnRowDataBound="myGridView_RowDataBound" BackColor="#CCCCCC" BorderColor="#999999"
    BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" CssClass="auto-style2"
    ForeColor="Black" Height="135px" Width="711px">
    <Columns>
        <asp:TemplateField HeaderText="ProductID">
            <ItemTemplate>
                <asp:Label ID="lblPrice" runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="ProductName">
            <ItemTemplate>
                <asp:Label ID="lblProductName" runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Price">
            <ItemTemplate>
                <asp:Label ID="lblProductID" runat="server"></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"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#CCCCCC" />
    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
    <RowStyle BackColor="White" />
    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#808080" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
<asp:Label ID="lblSumTotal" runat="server"></asp:Label>

 

<script type="text/javascript">
    function CalculateTotals() {
        var gv = document.getElementById("<%= myGridView.ClientID %>");
        var tb = gv.getElementsByTagName("input");
        var lb = gv.getElementsByTagName("span");

        var sub = 0;
        var total = 0;
        var indexQ = 1;
        var indexP = 0;

        for (var i = 0; i < tb.length; i++) {
            if (tb[i].type == "text") {
                sub = parseFloat(lb[indexP].innerHTML) * parseFloat(tb[i].value);
                if (isNaN(sub)) {
                    lb[i + indexQ].innerHTML = "";
                    sub = 0;
                } else {
                    lb[i + indexQ].innerHTML = sub;
                }
                indexQ++;
                indexP = indexP + 2;
                total += parseFloat(sub);
            }
        }
        lb[lb.length - 1].innerHTML = total;
    } 
</script>

 

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

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