Gridview calculate columns on runtime

Question

I have a grid view with three columns and five rows with text item item template fields for Inserting data on runtime to DB using Gridview.and i want to make some calculations with this grid view like addition of Column of Col1 and Col2 in 3rd column and also Sum of Col1 in footer.And also i want to make calculation as text changes in textboxes with out postback or page refresh.Please tell me how can i do this. I have following code to make grid view

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowFooter="True">
            <Columns>
                <asp:TemplateField HeaderText="One">
                    <FooterTemplate>
                        <asp:Label ID="lblOne_tot" runat="server"></asp:Label>
                    </FooterTemplate>
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Two">
                    <FooterTemplate>
                        <asp:Label ID="lblTwo_tot" runat="server"></asp:Label>
                    </FooterTemplate>
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Total">
                    <ItemTemplate>
                        <asp:Label ID="lblTotal" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Slippery Pete · Accepted Answer · 2011-12-23T06:52:34.517

1

Add an "onChange" event on each of your text boxes that calls a JavaScript function. Inside this function, do your calculations and update the proper label/div/span/etc.

<script language="javascript">
function doCalculations1(whichControl)
{
   //do calculations on whichControl.value
   var outputValue = whichControl.value * 5;
   //replace lblOne_tot with clientID after page is built
   document.getElementById("lblOne_tot").value = outputValue;
}
</script>

<asp:TextBox id="TextBox1" runat="server" onchange="javascript:doCalculations1(this);" />

edited Dec 23 '11 at 06:52

answered Dec 23 '11 at 06:22

Slippery Pete

526
5
10

But in javascript how can i find the text box from gridview control any example of gridview or suggestion – Adeel Aslam Dec 23 '11 at 13:17
This post has a great example: [http://stackoverflow.com/a/1129062/743633](http://stackoverflow.com/a/1129062/743633) You could create an array that stores all the values of text boxes in column 1, 2, 3, etc. The other way, which works (but I don't recommend if you see the form changing) is to just load the form, get the ID (such as GridView1$ctl02$TextBox1) and loop through the values. The next row would be GridView1$ctl03$TextBox1, next row GridView1$ctl04$TextBox1, etc, etc. – Slippery Pete Dec 23 '11 at 16:22

Gridview calculate columns on runtime

1 Answers1