?
Solved

Calculating running total with GridView checkboxes

Posted on 2006-07-20
6
Medium Priority
?
2,962 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 2000 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 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 24

Assisted Solution

by:Justin_W
Justin_W earned 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…
Suggested Courses
Course of the Month9 days, 7 hours left to enroll

762 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