Solved

Calculating running total with GridView checkboxes

Posted on 2006-07-20
6
2,946 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
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.…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …

695 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