Calculate TextBox running total in dynamically added GridView Row using jQuery in ASP.Net

Hi George616,

Check this example. Now please take its reference and correct your code.

HTML

<form id="form1" runat="server">
    <asp:GridView ID="Gridview1" runat="server" ShowFooter="True" AutoGenerateColumns="False" OnRowCreated="Gridview1_RowCreated"
        class="table table-striped table-bordered table-hover">
        <Columns>
            <asp:TemplateField HeaderText="Item Decription">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text="Item "></asp:TextBox>
                </ItemTemplate>
                <FooterStyle HorizontalAlign="Left" />
                <FooterTemplate>
                    <asp:Button ID="ButtonAdd" runat="server" Class="btn btn-primary" Text="+ Item" OnClick="ButtonAdd_Click" />
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Quantity">
                <ItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Rate">
                <ItemTemplate>
                    <span class="currency-symbol" style="font-weight: bolder">NGN</span>
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Amount">
                <ItemTemplate>
                    <span class="currency-symbol" style="font-weight: bolder">NGN</span>
                    <asp:Label ID="Label1" runat="server" Text="0" Font-Bold="True"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Remove</asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <HeaderStyle Height="10px" />
    </asp:GridView>
    <asp:Button ID="Button1" runat="server" Text="Save" OnClick="Button1_Click" />
</form>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).on("change keyup", "[id*=TextBox2],[id*=TextBox3]", function () {
        var row = $(this).closest("tr");
        var quantity = parseFloat($.trim($(row).find($('[id*=TextBox2]')).val()));
        var rate = parseFloat($.trim($(row).find($('[id*=TextBox3]')).val()));
        if (isNaN(quantity)) {
            quantity = 0;
        }
        if (isNaN(rate)) {
            rate = 0;
        }
        $(row).find($('[id*=TextBox2]')).val(quantity);
        $(row).find($('[id*=TextBox3]')).val(rate);
        $(row).find($('[id*=Label1]')).html(parseFloat(rate) * parseFloat(quantity));
    });
</script>

Namespaces

C#

using System.Collections.Specialized;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Text;

VB.Net

Imports System.Collections.Specialized
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Text

Code

C#

protected void Page_Load(object sender, EventArgs e)
{

    if (!Page.IsPostBack)
    {
        SetInitialRow();
    }
}
protected void ButtonAdd_Click(object sender, EventArgs e)
{
    AddNewRowToGrid();
}
protected void Gridview1_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        DataTable dt = (DataTable)ViewState["CurrentTable"];
        LinkButton lb = (LinkButton)e.Row.FindControl("LinkButton1");
        if (lb != null)
        {
            if (dt.Rows.Count > 1)
            {
                if (e.Row.RowIndex == dt.Rows.Count - 1)
                {
                    lb.Visible = false;
                }
            }
            else
            {
                lb.Visible = false;
            }
        }
    }
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
    LinkButton lb = (LinkButton)sender;
    GridViewRow gvRow = (GridViewRow)lb.NamingContainer;
    int rowID = gvRow.RowIndex + 1;
    if (ViewState["CurrentTable"] != null)
    {
        DataTable dt = (DataTable)ViewState["CurrentTable"];
        if (dt.Rows.Count > 1)
        {
            if (gvRow.RowIndex < dt.Rows.Count - 1)
            {
                dt.Rows.Remove(dt.Rows[rowID]);
            }
        }
        ViewState["CurrentTable"] = dt;
        Gridview1.DataSource = dt;
        Gridview1.DataBind();
    }

    SetPreviousData();
}
protected void Button1_Click(object sender, EventArgs e)
{
    int rowIndex = 0;
    StringCollection sc = new StringCollection();
    if (ViewState["CurrentTable"] != null)
    {
        DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
        if (dtCurrentTable.Rows.Count > 0)
        {
            for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
            {
                TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");
                TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("TextBox2");
                TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("TextBox3");
                Label total = (Label)Gridview1.Rows[rowIndex].Cells[4].FindControl("Label1");
                sc.Add(box1.Text + "," + box2.Text + "," + box3.Text + "," + total.Text);
                rowIndex++;
            }
            InsertRecords(sc);
        }
    }
}
private void SetInitialRow()
{
    DataTable dt = new DataTable();
    DataRow dr = null;
    dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
    dt.Columns.Add(new DataColumn("Column1", typeof(string)));
    dt.Columns.Add(new DataColumn("Column2", typeof(string)));
    dt.Columns.Add(new DataColumn("Column3", typeof(string)));
    dt.Columns.Add(new DataColumn("Total", typeof(string)));
    dr = dt.NewRow();
    dr["RowNumber"] = 1;
    dr["Column1"] = string.Empty;
    dr["Column2"] = string.Empty;
    dr["Column3"] = string.Empty;
    dr["Total"] = string.Empty;
    dt.Rows.Add(dr);
    ViewState["CurrentTable"] = dt;

    Gridview1.DataSource = dt;
    Gridview1.DataBind();
}
private void AddNewRowToGrid()
{
    int rowIndex = 0;

    if (ViewState["CurrentTable"] != null)
    {
        DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
        DataRow drCurrentRow = null;
        if (dtCurrentTable.Rows.Count > 0)
        {
            for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
            {
                TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");
                TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("TextBox2");
                TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("TextBox3");
                Label lblTtotal = (Label)Gridview1.Rows[rowIndex].Cells[4].FindControl("Label1");

                drCurrentRow = dtCurrentTable.NewRow();

                drCurrentRow["RowNumber"] = i + 1;
                drCurrentRow["Column1"] = box1.Text;
                drCurrentRow["Column2"] = box2.Text;
                drCurrentRow["Column3"] = box3.Text;
                drCurrentRow["Total"] = Convert.ToDecimal(box2.Text) * Convert.ToDecimal(box3.Text);

                rowIndex++;
            }
            dtCurrentTable.Rows.Add(drCurrentRow);
            ViewState["CurrentTable"] = dtCurrentTable;

            Gridview1.DataSource = dtCurrentTable;
            Gridview1.DataBind();
        }
    }
    else
    {
        Response.Write("ViewState is null");
    }

    SetPreviousData();
}
private void SetPreviousData()
{
    int rowIndex = 0;
    if (ViewState["CurrentTable"] != null)
    {
        DataTable dt = (DataTable)ViewState["CurrentTable"];
        if (dt.Rows.Count > 0)
        {
            for (int i = 1; i < dt.Rows.Count; i++)
            {
                TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");
                TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("TextBox2");
                TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("TextBox3");
                Label lblTtotal = (Label)Gridview1.Rows[rowIndex].Cells[4].FindControl("Label1");

                box1.Text = dt.Rows[i]["Column1"].ToString();
                box2.Text = dt.Rows[i]["Column2"].ToString();
                box3.Text = dt.Rows[i]["Column3"].ToString();
                lblTtotal.Text = dt.Rows[i]["Total"].ToString();

                rowIndex++;

            }
        }
    }
}
private string GetConnectionString()
{
    return ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
}
private void InsertRecords(StringCollection sc)
{
    SqlConnection conn = new SqlConnection(GetConnectionString());
    StringBuilder sb = new StringBuilder(string.Empty);
    string[] splitItems = null;
    foreach (string item in sc)
    {

        const string sqlStatement = "INSERT INTO SampleTable (Column1,Column2,Column3,Total) VALUES";
        if (item.Contains(","))
        {
            splitItems = item.Split(",".ToCharArray());
            sb.AppendFormat("{0}('{1}','{2}','{3}','{4}'); ", sqlStatement, splitItems[0], splitItems[1], splitItems[2], splitItems[3]);
        }
    }
    try
    {
        conn.Open();
        SqlCommand cmd = new SqlCommand(sb.ToString(), conn);
        cmd.CommandType = CommandType.Text;
        cmd.ExecuteNonQuery();

        Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "Script", "alert('Records Successfuly Saved!');", true);
    }
    catch (SqlException ex)
    {
        string msg = "Insert Error:";
        msg += ex.Message;
        throw new Exception(msg);

    }
    finally
    {
        conn.Close();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        SetInitialRow()
    End If
End Sub

Protected Sub ButtonAdd_Click(ByVal sender As Object, ByVal e As EventArgs)
    AddNewRowToGrid()
End Sub

Protected Sub Gridview1_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim dt As DataTable = CType(ViewState("CurrentTable"), DataTable)
        Dim lb As LinkButton = CType(e.Row.FindControl("LinkButton1"), LinkButton)
        If lb IsNot Nothing Then
            If dt.Rows.Count > 1 Then
                If e.Row.RowIndex = dt.Rows.Count - 1 Then
                    lb.Visible = False
                End If
            Else
                lb.Visible = False
            End If
        End If
    End If
End Sub

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim lb As LinkButton = CType(sender, LinkButton)
    Dim gvRow As GridViewRow = CType(lb.NamingContainer, GridViewRow)
    Dim rowID As Integer = gvRow.RowIndex + 1
    If ViewState("CurrentTable") IsNot Nothing Then
        Dim dt As DataTable = CType(ViewState("CurrentTable"), DataTable)
        If dt.Rows.Count > 1 Then
            If gvRow.RowIndex < dt.Rows.Count - 1 Then
                dt.Rows.Remove(dt.Rows(rowID))
            End If
        End If

        ViewState("CurrentTable") = dt
        Gridview1.DataSource = dt
        Gridview1.DataBind()
    End If

    SetPreviousData()
End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim rowIndex As Integer = 0
    Dim sc As StringCollection = New StringCollection()

    If ViewState("CurrentTable") IsNot Nothing Then
        Dim dtCurrentTable As DataTable = CType(ViewState("CurrentTable"), DataTable)
        If dtCurrentTable.Rows.Count > 0 Then
            For i As Integer = 1 To dtCurrentTable.Rows.Count
                Dim box1 As TextBox = CType(Gridview1.Rows(rowIndex).Cells(1).FindControl("TextBox1"), TextBox)
                Dim box2 As TextBox = CType(Gridview1.Rows(rowIndex).Cells(2).FindControl("TextBox2"), TextBox)
                Dim box3 As TextBox = CType(Gridview1.Rows(rowIndex).Cells(3).FindControl("TextBox3"), TextBox)
                Dim total As Label = CType(Gridview1.Rows(rowIndex).Cells(4).FindControl("Label1"), Label)
                sc.Add(box1.Text & "," + box2.Text & "," + box3.Text & "," + total.Text)
                rowIndex += 1
            Next

            InsertRecords(sc)
        End If
    End If
End Sub

Private Sub SetInitialRow()
    Dim dt As DataTable = New DataTable()
    Dim dr As DataRow = Nothing
    dt.Columns.Add(New DataColumn("RowNumber", GetType(String)))
    dt.Columns.Add(New DataColumn("Column1", GetType(String)))
    dt.Columns.Add(New DataColumn("Column2", GetType(String)))
    dt.Columns.Add(New DataColumn("Column3", GetType(String)))
    dt.Columns.Add(New DataColumn("Total", GetType(String)))
    dr = dt.NewRow()
    dr("RowNumber") = 1
    dr("Column1") = String.Empty
    dr("Column2") = String.Empty
    dr("Column3") = String.Empty
    dr("Total") = String.Empty
    dt.Rows.Add(dr)
    ViewState("CurrentTable") = dt
    Gridview1.DataSource = dt
    Gridview1.DataBind()
End Sub

Private Sub AddNewRowToGrid()
    Dim rowIndex As Integer = 0

    If ViewState("CurrentTable") IsNot Nothing Then
        Dim dtCurrentTable As DataTable = CType(ViewState("CurrentTable"), DataTable)
        Dim drCurrentRow As DataRow = Nothing
        If dtCurrentTable.Rows.Count > 0 Then
            For i As Integer = 1 To dtCurrentTable.Rows.Count
                Dim box1 As TextBox = CType(Gridview1.Rows(rowIndex).Cells(1).FindControl("TextBox1"), TextBox)
                Dim box2 As TextBox = CType(Gridview1.Rows(rowIndex).Cells(2).FindControl("TextBox2"), TextBox)
                Dim box3 As TextBox = CType(Gridview1.Rows(rowIndex).Cells(3).FindControl("TextBox3"), TextBox)
                Dim lblTtotal As Label = CType(Gridview1.Rows(rowIndex).Cells(4).FindControl("Label1"), Label)
                drCurrentRow = dtCurrentTable.NewRow()
                drCurrentRow("RowNumber") = i + 1
                drCurrentRow("Column1") = box1.Text
                drCurrentRow("Column2") = box2.Text
                drCurrentRow("Column3") = box3.Text
                drCurrentRow("Total") = Convert.ToDecimal(box2.Text) * Convert.ToDecimal(box3.Text)
                rowIndex += 1
            Next
            dtCurrentTable.Rows.Add(drCurrentRow)
            ViewState("CurrentTable") = dtCurrentTable
            Gridview1.DataSource = dtCurrentTable
            Gridview1.DataBind()
        End If
    Else
        Response.Write("ViewState is null")
    End If

    SetPreviousData()
End Sub

Private Sub SetPreviousData()
    Dim rowIndex As Integer = 0
    If ViewState("CurrentTable") IsNot Nothing Then
        Dim dt As DataTable = CType(ViewState("CurrentTable"), DataTable)
        If dt.Rows.Count > 0 Then
            For i As Integer = 1 To dt.Rows.Count - 1
                Dim box1 As TextBox = CType(Gridview1.Rows(rowIndex).Cells(1).FindControl("TextBox1"), TextBox)
                Dim box2 As TextBox = CType(Gridview1.Rows(rowIndex).Cells(2).FindControl("TextBox2"), TextBox)
                Dim box3 As TextBox = CType(Gridview1.Rows(rowIndex).Cells(3).FindControl("TextBox3"), TextBox)
                Dim lblTtotal As Label = CType(Gridview1.Rows(rowIndex).Cells(4).FindControl("Label1"), Label)
                box1.Text = dt.Rows(i)("Column1").ToString()
                box2.Text = dt.Rows(i)("Column2").ToString()
                box3.Text = dt.Rows(i)("Column3").ToString()
                lblTtotal.Text = dt.Rows(i)("Total").ToString()
                rowIndex += 1
            Next
        End If
    End If
End Sub

Private Function GetConnectionString() As String
    Return ConfigurationManager.ConnectionStrings("DBConnection").ConnectionString
End Function

Private Sub InsertRecords(ByVal sc As StringCollection)
    Dim conn As SqlConnection = New SqlConnection(GetConnectionString())
    Dim sb As StringBuilder = New StringBuilder(String.Empty)
    Dim splitItems As String() = Nothing
    For Each item As String In sc
        Const sqlStatement As String = "INSERT INTO SampleTable (Column1,Column2,Column3,Total) VALUES"
        If item.Contains(",") Then
            splitItems = item.Split(",".ToCharArray())
            sb.AppendFormat("{0}('{1}','{2}','{3}','{4}'); ", sqlStatement, splitItems(0), splitItems(1), splitItems(2), splitItems(3))
        End If
    Next

    Try
        conn.Open()
        Dim cmd As SqlCommand = New SqlCommand(sb.ToString(), conn)
        cmd.CommandType = CommandType.Text
        cmd.ExecuteNonQuery()
        Page.ClientScript.RegisterClientScriptBlock(GetType(Page), "Script", "alert('Records Successfuly Saved!');", True)
    Catch ex As SqlException
        Dim msg As String = "Insert Error:"
        msg += ex.Message
        Throw New Exception(msg)
    Finally
        conn.Close()
    End Try
End Sub

Screenshot