Calculate ASP.Net GridView Running and Grand Total using JavaScript

Last Reply 6 months ago By dharmendr

Posted 6 months 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>

 

Posted 6 months 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