Solved

Calculating running total with GridView checkboxes

Posted on 2006-07-20
6
2,900 Views
Last Modified: 2007-12-19
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
Comment
Question by:Paul Kahl
  • 4
  • 2
6 Comments
 
LVL 24

Accepted Solution

by:
Justin_W earned 500 total points
ID: 17150353
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
 
LVL 24

Assisted Solution

by:Justin_W
Justin_W earned 500 total points
ID: 17150365
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
 
LVL 3

Author Comment

by:Paul Kahl
ID: 17150858
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 24

Assisted Solution

by:Justin_W
Justin_W earned 500 total points
ID: 17150912
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
 
LVL 3

Author Comment

by:Paul Kahl
ID: 17154512
So, basically what I'm hearing is that there is no simple method to accomplishing this task.

Thanks for the info.
0
 
LVL 24

Expert Comment

by:Justin_W
ID: 17155235
Yuo're welcome.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
This video discusses moving either the default database or any database to a new volume.
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now