Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2986
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

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