javascript function to calculate two rows and provide a running summary total.

Question

0.00/5 (No votes)

See more:

I have a javascript function that calculates a boundfield and a text box to provide a total column. The problem is as the total column is populated on the client side and by user input, I'm finding it difficult to total the summary in the footer. Does anyone have a solution or perhaps able to direct me in the right direction.

Javascript Code below.

JavaScript

<script type="text/javascript">
    function multiply(Rate, number, total) {
        var num = parseFloat(document.getElementById(number).value);
        var tot = document.getElementById(total);
        var totValue = parseFloat(((Rate * num)));
        var totValueRound = Math.round(totValue, 4);
        var totValueRound = totValue;
        tot.innerHTML = totValueRound; 
    }
</script>

Code behind

C#

if (e.Row.RowType == DataControlRowType.DataRow)
     {
         Label lblItemDescription = (Label)e.Row.FindControl("lblItemDescription");
         Label lblRate = (Label)e.Row.FindControl("lblRate");
         Double PR = Convert.ToDouble(lblRate.Text);
         TextBox txtBoxNumber = (TextBox)e.Row.FindControl("txtBoxNumber");
         Label lblTotal = (Label)e.Row.FindControl("lblTotal");
         txtBoxNumber.Attributes.Add("onchange", "multiply(" + PR + ", '" + txtBoxNumber.ClientID + "','" + lblTotal.ClientID + "')");

     }
     else if (e.Row.RowType == DataControlRowType.Footer)
     {
         Label lblTotalled = (Label)e.Row.FindControl("lblTotalled");
     }

Markup :

ASP.NET

<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" 
            DataSourceID="AccessDataSource1" Visible="true" EnableViewState="true" 
            ShowFooter="True" style="margin-bottom: 0px">
            <Columns>
            <asp:TemplateField HeaderText="Devices And Services" Visible="True" HeaderStyle-HorizontalAlign="Left"  FooterText="Payable monthly in advance (excluding Agreement items):" ItemStyle-BackColor="#CCCCCC">
                    <ItemTemplate>
                        <asp:Label ID="lblItemDescription" runat="server" Width="382"
Text='<%# Eval("itemDescription") %>'></asp:Label>
                    </ItemTemplate>

<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Rate">
                    <ItemTemplate>
                        <asp:Label ID="lblRate" runat="server" width="50" ></asp:Label>
                       
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Number" ControlStyle-BackColor="#FFFFCC">
                    <ItemTemplate>
                        <asp:TextBox ID="txtBoxNumber" Width="100px"
runat="Server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Total">
                    <ItemTemplate>                  
                        <asp:Label ID="lblTotal" runat="Server"  Width="106" />
                    </ItemTemplate>
                     <FooterTemplate>            
                 <asp:Label ID="lblTotalled" runat="server"  />        
                 </FooterTemplate>   
                </asp:TemplateField>
              
               
                  
                    
                
            </Columns>
            <FooterStyle Font-Bold="True" />
        </asp:GridView>

Thanks.

Posted 25-Jan-12 12:09pm

Andrew Chambers

Updated 25-Jan-12 20:25pm

v4

Add a Solution

2 solutions

Solution 1

here i have written a nice code to calculate the total of grid and assign into footer with a simple logic. i think it will help.

C#

function calculateGridTotal() {  // call this on body load

    var tmpgvRenewal = document.getElementById("gvRenewal");  // this the gridis
    var TotalRenewalAmount = 0.0;
    var TotalDeductionAmount = 0.0;
    var TotalInvoiceAmount = 0.0;
    var arrstr = tmpgvRenewal.id + "_ctl";

    for (var i = 2; i <= tmpgvRenewal.childNodes[0].childNodes.length - 1; i++) {   //search for all row of grid view and calculate whatever you want
        if (parseInt(i) < 10) {
            var c = "0" + i;
        }
        else {
            var c = i;
        }
        var lblRenewalAmount = document.getElementById(arrstr + c + "_lblRenewalAmount").innerHTML;
        var lblDeductionAmount = document.getElementById(arrstr + c + "_lblDeductionAmount").innerHTML;
        var lblInvoiceAmount = document.getElementById(arrstr + c + "_lblInvoiceAmount").innerHTML;
        lblRenewalAmount = lblRenewalAmount.replace(/,/g, '');
        lblDeductionAmount = lblDeductionAmount.replace(/,/g, '');
        lblInvoiceAmount = lblInvoiceAmount.replace(/,/g, '');

        if (lblRenewalAmount != "")
            TotalRenewalAmount = TotalRenewalAmount + parseFloat(lblRenewalAmount);

        if (lblDeductionAmount != "")
            TotalDeductionAmount = TotalDeductionAmount + parseFloat(lblDeductionAmount);
        if (lblInvoiceAmount != "")
            TotalInvoiceAmount = TotalInvoiceAmount + parseFloat(lblInvoiceAmount);
    }

    tmpgvRenewal.rows[tmpgvRenewal.rows.length - 1].cells[2].innerHTML = TotalRenewalAmount;   // assign it to footer row of grid(make footer row visible = true)
    tmpgvRenewal.rows[tmpgvRenewal.rows.length - 1].cells[3].innerHTML = TotalDeductionAmount;
    tmpgvRenewal.rows[tmpgvRenewal.rows.length - 1].cells[4].innerHTML = TotalInvoiceAmount;

}

Posted 26-Jan-12 22:29pm

S.P.Tiwari

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sanjay K. Gupta · Accepted Answer · 2012-01-26T22:44:00

Try this
-------------------

C#

function calculate() {
           var grandTotal = 0;
           var grid = document.getElementById('GridView1');
           for (j = 1; j < grid.rows.length - 1; j++) {
               var rate = parseFloat(grid.rows[j].cells[1].children[0].innerHTML);
               var qty = parseFloat(grid.rows[j].cells[2].children[0].value);
               var total = rate * qty;
               grandTotal += total;
               grid.rows[j].cells[3].children[0].innerHTML = total.toFixed(2);
           }
           //set Grand Total in Footer
           grid.rows[grid.rows.length-1].cells[3].children[0].innerHTML = total.toFixed(2);

       }

javascript function to calculate two rows and provide a running summary total.

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

javascript function to calculate two rows and provide a running summary total.

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us