We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >

# Calculating total in a column on a GridView after a value is entered in templatefield text boxes. RSS

## 2 replies

Last post Nov 15, 2018 04:32 AM by Ackerly Xu

• funluckykitt...

Participant

1131 Points

1693 Posts

### Calculating total in a column on a GridView after a value is entered in templatefield text boxes....

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...

--Susan
• mgebhard

All-Star

54641 Points

24475 Posts

### Re: Calculating total in a column on a GridView after a value is entered in templatefield text bo...

#### funluckykitty

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?

• Ackerly Xu

Contributor

3500 Points

1300 Posts

### Re: Calculating total in a column on a GridView after a value is entered in templatefield text bo...

Nov 15, 2018 04:32 AM|Ackerly Xu|LINK

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

MSDN Community Support