locked
Calculating total in a column on a GridView after a value is entered in templatefield text boxes. RRS feed

  • Question

  • User2028823583 posted

    Hi there.  I've got a ASP.NET Web page in C# that has a gridview in it with 10 templatefield text boxes.  Then, on the far right, is column #11,(total label), which is also a template field.

    I'm curious, if there is a way to calculate the sum of the first 10 textboxes (by row) and display it in the total label after a user enters a value in each of the 10 textboxes.  So, it'd kind of look like a running total...  

    Wednesday, November 14, 2018 3:13 PM

All replies

  • User475983607 posted

    I'm curious, if there is a way to calculate the sum of the first 10 textboxes (by row) and display it in the total label after a user enters a value in each of the 10 textboxes.  So, it'd kind of look like a running total...

    Write a JavaScript/jQuery application. 

    The main programming problem is selecting the inputs within a row on an event like an input losing focus.  I generally come up with an HTML design that makes selecting a row and the TDs within the row simple. 

    Is there anyway you can show us the code that you have attempted?  Explain the expected outcome and the actual outcome?

    Wednesday, November 14, 2018 3:36 PM
  • User-893317190 posted

    Hi funluckykitty,

    You could use jquery to meet your requirement.

    Below is my code.

      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    
                <Columns>
                    <asp:TemplateField>
                       <ItemTemplate>
                            <asp:TextBox runat="server" ></asp:TextBox>
                       </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField>
                       <ItemTemplate>
                            <asp:TextBox runat="server" ></asp:TextBox>
                       </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField>
                       <ItemTemplate>
                            <asp:TextBox runat="server" ></asp:TextBox>
                       </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField>
                       <ItemTemplate>
                            <asp:TextBox runat="server" ></asp:TextBox>
                       </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField>
                       <ItemTemplate>
                            <asp:TextBox runat="server" ></asp:TextBox>
                       </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField>
                       <ItemTemplate>
                          total: <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                       </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
    
      <script>
                $(function () {
    
                    $("#GridView1 input[type='text']").keyup(function () {// register keyup event on all the textbox
                        var total = 0;     // get all the textbox in the same row and calculate their tatoal value
                        $(this).parent().parent().find("input[type='text']").each(function (index,ele) {
                            
                            total += isNaN(parseInt($(ele).val())) ? 0 : parseFloat($(ele).val());
                        })
                        $(this).parent().parent().find("[id*=Label1]").text(total);//set the label's text to total
                    }) 
    
                })
            </script>
    

    The result.

    Best regards,

    Ackerly Xu

    Thursday, November 15, 2018 4:32 AM