• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2990
  • Last Modified:

Calculating running total with GridView checkboxes

ok.. this is sorta higgledy-piggledy, but what I have is this. I have a page witha  gridview for invoicing. The gridview has a column with "Amount Due" and a column with checkboxes. In the footer, I have a TextBox set with an initial value of $0.00.

I've set up a "select all" functionality on the checkboxes, no problem. What I _NEED_ to do is set up the checkboxes to automatically (onCheck of the checkbox) calculate the running total (of all checked boxes corresponding Amount Due value in the row), and display that in the TextBox in the footer. I did this in ASP classic long ago, but the code doesn't seem very portable.

Here's what I have:

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <link href="~/css/OSI_Style_FF.css" rel="stylesheet" type="text/css" runat="Server" id="cssLinkTag" />
        <script type="text/javascript">
            <!--//
                function SelectAll(CheckBoxControl)
                    {
                        if (CheckBoxControl.checked == true)
                            {
                                var i;
                                for (i=0; i < document.form1.elements.length; i++)
                                    {
                                        if ((document.form1.elements[i].type == 'checkbox') && (document.form1.elements[i].name.indexOf('grdvwInvoiceSelect') > -1))
                                            {
                                                document.form1.elements[i].checked = true;
                                            }
                                    }
                            }
                        else
                            {
                                var i;
                                for (i=0; i < document.form1.elements.length; i++)
                                    {
                                        if ((document.form1.elements[i].type == 'checkbox') && (document.form1.elements[i].name.indexOf('grdvwInvoiceSelect') > -1))
                                            {
                                                document.form1.elements[i].checked = false;
                                            }
                                    }
                            }
                    }
            //-->
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Panel ID="pnlPageOne" runat="server">
                <asp:GridView ID="grdvwInvoiceSelect" CssClass="idGrid" CellPadding="3"
                    AutoGenerateColumns="false" runat="server" Width="100%"
                    EmptyDataText="No Invoices on file." AllowSorting="true"
                    OnSorting ="grdvwInvoiceSelect_OnSorting" DataKeyNames="INVOICE" GridLines="None">
                    <HeaderStyle CssClass="ItemHeaderWhite" />
                    <RowStyle CssClass="Item" />
                    <AlternatingRowStyle CssClass="AltItem" />
                    <Columns>
                        <asp:BoundField DataField="INVOICE" HeaderText="Invoice #" HtmlEncode="false" SortExpression="INVOICE">
                            <HeaderStyle HorizontalAlign="Left" VerticalAlign="bottom" />
                            <ItemStyle HorizontalAlign="Left" Width="72%" />
                        </asp:BoundField>
                       
                        <asp:BoundField DataField="AMOUNTCUR" DataFormatString="{0:$#,##0.00;<span class='Red'>($#,##0.00)</span>}" HeaderText="Amount<br />Due" HtmlEncode="false" SortExpression="AMOUNTCUR">
                            <HeaderStyle HorizontalAlign="Right" VerticalAlign="bottom" />
                            <ItemStyle HorizontalAlign="Right" Width="14%" />
                        </asp:BoundField>
                        <asp:templatefield>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="bottom" />
                            <HeaderTemplate>
                                <input type="CheckBox" name="SelectAllCheckBox" onclick="SelectAll(this)">
                            </HeaderTemplate>
                            <ItemStyle HorizontalAlign="Center" Width="14%" />
                            <itemtemplate>
                                <asp:CheckBox ID="chbCheckToPay" runat="server" ValidationGroup="vgInvoicePay" />
                            </itemtemplate>
                        </asp:templatefield>
                    </Columns>
                </asp:GridView>
                <table cellpadding="0" cellspacing="0" width="100%">
                    <tr class="ItemHeaderWhite">
                                <td style="width: 72%; padding: 2px 5px 2px 5px; border-top: 1px solid #000; text-align: Right; font-weight: bold;">Total Owed: </td>
                                <td style="width: 14%; padding: 2px 5px 2px 5px; border-top: 1px solid #000; text-align: Right; font-weight: bold;"><asp:Label ID="lblTotalOwed" runat="server" /></td>
                                <td style="width: 14%; padding: 2px 5px 2px 5px; border-top: 1px solid #000; text-align: center;">&nbsp;</td>
                          </tr>
                          <tr class="ItemHeaderWhite">
                                <td style="padding: 2px 5px 2px 5px; text-align: Right; font-weight: bold;">Total Paying: </td>
                                <td style="padding: 2px 5px 2px 5px; text-align: Right; font-weight: bold;"><asp:TextBox ID="txtTotalPaying" runat="server" Text="$0.00" style="border: 0px; text-align: right; font-weight: bold; background: transparent; color: #FFF; width: 100%;" ReadOnly="true" /></td>
                                <td style="padding: 2px 5px 2px 5px; text-align: center;"><asp:Button ID="btnGrdvwInvoiceSelectSubmit" runat="server" CssClass="submit" Text="Pay" /></td>
                          </tr>
                    </table>
            </asp:Panel>
        </form>
    </body>
</html>
0
Paul Kahl
Asked:
Paul Kahl
  • 4
  • 2
3 Solutions
 
Justin_WCommented:
If you want to calculate the total in server-side code, then simply have your checkboxes use AutoPostback=true, and have your selectall function programmatically initiate a PostBack (since programatically changing a control's value bypasses AutoPostBack).

If you want to calculate it in client-side code, then it will be ugly, and there's no way to avoid the ugliness. But you would probably want to dynamically construct a client-side script function in your server-side code, and you could use the ClientID property of the CheckBoxes to construct the script.
0
 
Justin_WCommented:
Note that you could also implement a client-side onchange="myfunction();" handler on each checkbox, and simply use the following in your selectall script:
    document.form1.elements[i].checked = true;
    document.form1.elements[i].onchange();
0
 
Paul KahlAuthor Commented:
I'm generating the GridView on the fly (because I'm also using custom sorting functionality on the columns), so I can't really parse the data server-side until post. I'd like to do this client-side, and Javascript is fine for that, I just can't figure out for the life of me how to go about doing that.

The old way I did it was:

function calculate(){
      var formObject = document.PageOne;
      var total = 0;
      var SecretCountHolder = formObject.elements['SecretCountHolder'].value;
      SecretCountHolder = 0;
      for( var i=0; i<countElements; i++ ){
            if(formObject.elements['PayMe[' + i + ']'].checked){
                  total = total/1 + formObject.elements['price[' + i + ']'].value/1;
                  SecretCountHolder = SecretCountHolder + 1;
            }
      }
      formObject.SecretCountHolder.value = SecretCountHolder;
      formObject.totalValue.value = '$' + total.toFixed(2);
}

and I'd run that function onClick on the checkbox. however, the asp:CheckBox is created in such a way that I can't use this old iterator functionality to parse through, at least I don't think so. IfI'm wrong, let me know.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Justin_WCommented:
You are correct, the following line wouldn't work:
    if(formObject.elements['PayMe[' + i + ']'].checked){

However, you could loop through _all_ of the objects in the formObject.elements array, and check whether the name and/or id of each one ends with and/or contains a substring that you know is unique to your checkboxes.

If you don't want to loop through the entire formObject.elements array, you would have to construct your own array of checkboxes at some point, probably by injecting dynamic script blocks in each row just after each checkbox. (I.e. Each row would essentially add its cb to the array as it was rendered by the browser.) However, this would be messier than looping through all of the objects in the formObject.elements array IMO.
0
 
Paul KahlAuthor Commented:
So, basically what I'm hearing is that there is no simple method to accomplishing this task.

Thanks for the info.
0
 
Justin_WCommented:
Yuo're welcome.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now