在GridView中回发后，JavaScript代码将无法运行

Question

The below code generate a row in GridView when clicking a Button that is residing inside a GridView Footer.

i used the JavaScript to make some calculation on the grid-view to get total amount and net total.

But the issue is when i add new row to the grid the calculated values disappear from the grid view.

Before adding the row.

After adding the row.

JavaScript Code

    $(document).ready(function () {
       function multInputs() {
           var $mult = 0;
           var $multNet = 0;
           var $multGrand = 0;
           $("tr.txtMult").each(function () {
               var $UnitPrice = $('.UnitPrice', this).val();
               var $Quantity = $('.Quantity', this).val();
               var $Discount = $('.Discount', this).val();
               var $total = (($UnitPrice) * ($Quantity));
               var $Nettotal = (($UnitPrice) * ($Quantity) - ($Discount) * ($Quantity));

               $mult += $total;
               $multNet += $Nettotal;
           });

           $("tr.txtMult").each(function () {
               var $UnitPrice = $('.UnitPrice', this).val();
               var $Quantity = $('.Quantity', this).val();
               var $Discount = $('.Discount', this).val();
               var $total = (($UnitPrice) * ($Quantity));
               var $Nettotal = (($UnitPrice) * ($Quantity) - ($Discount) * ($Quantity));

               $('.multTotal', this).text(parseFloat($total).toFixed(2));
               $('.multNet', this).text(parseFloat($Nettotal).toFixed(2));

           });
           $(".lblGrandAmount").text(parseFloat($mult).toFixed(2));
           $(".lblNetTotal").text(parseFloat($multNet).toFixed(2));
       }                          

    $(".txtMult input").on('keyup mouseup', multInputs);
    function multInputs() {
        var $mult = 0;
        var $multNet = 0;
        var $multGrand = 0;
        $("tr.txtMult").each(function () {
            var $UnitPrice = $('.UnitPrice', this).val();
            var $Quantity = $('.Quantity', this).val();
            var $Discount = $('.Discount', this).val();
            var $total = (($UnitPrice) * ($Quantity));
            var $Nettotal = (($UnitPrice) * ($Quantity) - ($Discount) * ($Quantity));

            $mult += $total;
            $multNet += $Nettotal;   

        });

        $("tr.txtMult").each(function () {
            var $UnitPrice = $('.UnitPrice', this).val();
            var $Quantity = $('.Quantity', this).val();
            var $Discount = $('.Discount', this).val();
            var $total = (($UnitPrice) * ($Quantity));
            var $Nettotal = (($UnitPrice) * ($Quantity) - ($Discount) * ($Quantity));

            $('.multTotal', this).text(parseFloat($total).toFixed(2));
            $('.multNet', this).text(parseFloat($Nettotal).toFixed(2));

        });
        $(".lblGrandAmount").text(parseFloat($mult).toFixed(2));
        $(".lblNetTotal").text(parseFloat($multNet).toFixed(2));

    }
});

C# code

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            SetInitialRow();
        }
    }

 protected void griditem_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.CssClass = "txtMult";
        }    
    }


    protected void ButtonAdd_Click(object sender, EventArgs e)
    {
        AddNewRowToGrid();
    }

    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++)
                {
                    //extract the TextBox values
                    DropDownList dllitem = (DropDownList)griditem.Rows[rowIndex].Cells[1].FindControl("dllitem");
                    TextBox txtUnitprice = (TextBox)griditem.Rows[rowIndex].Cells[2].FindControl("txtUnitprice");
                    TextBox txtDiscount = (TextBox)griditem.Rows[rowIndex].Cells[3].FindControl("txtDiscount");
                    TextBox txtQuantity = (TextBox)griditem.Rows[rowIndex].Cells[4].FindControl("txtQuantity");
                    Label lblTotal = (Label)griditem.Rows[rowIndex].Cells[5].FindControl("lblTotal");
                    Label lblnet = (Label)griditem.Rows[rowIndex].Cells[6].FindControl("lblnet");

                    drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["Sr.No"] = i + 1;

                    dtCurrentTable.Rows[i - 1]["Column1"] = dllitem.SelectedValue;
                    dtCurrentTable.Rows[i - 1]["Column2"] = txtUnitprice.Text;
                    dtCurrentTable.Rows[i - 1]["Column3"] = txtDiscount.Text;
                    dtCurrentTable.Rows[i - 1]["Column4"] = txtQuantity.Text;
                    dtCurrentTable.Rows[i - 1]["Column5"] = lblTotal.Text;
                    dtCurrentTable.Rows[i - 1]["Column6"] = lblnet.Text;


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

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

        //Set Previous Data on Postbacks
        SetPreviousData();
    }

    private void SetPreviousData()
    {
        int rowIndex = 0;
        if (ViewState["CurrentTable"] != null)
        {
            DataTable dt = (DataTable)ViewState["CurrentTable"];
            if (dt.Rows.Count > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    DropDownList dllitem = (DropDownList)griditem.Rows[rowIndex].Cells[1].FindControl("dllitem");
                    TextBox txtUnitprice = (TextBox)griditem.Rows[rowIndex].Cells[2].FindControl("txtUnitprice");
                    TextBox txtDiscount = (TextBox)griditem.Rows[rowIndex].Cells[3].FindControl("txtDiscount");
                    TextBox txtQuantity = (TextBox)griditem.Rows[rowIndex].Cells[4].FindControl("txtQuantity");
                    Label lblTotal = (Label)griditem.Rows[rowIndex].Cells[5].FindControl("lblTotal");
                    Label lblnet = (Label)griditem.Rows[rowIndex].Cells[6].FindControl("lblnet");

                    dllitem.SelectedValue = dt.Rows[i]["Column1"].ToString();
                    txtUnitprice.Text = dt.Rows[i]["Column2"].ToString();
                    txtDiscount.Text = dt.Rows[i]["Column3"].ToString();
                    txtQuantity.Text = dt.Rows[i]["Column4"].ToString();
                    lblTotal.Text = dt.Rows[i]["Column5"].ToString();
                    lblnet.Text = dt.Rows[i]["Column6"].ToString();

                    rowIndex++;
                }
            }
        }
    }    

    private void SetInitialRow()
    {
        DataTable dt = new DataTable();
        DataRow dr = null;
        dt.Columns.Add(new DataColumn("Sr.No", 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("Column4", typeof(string)));
        dt.Columns.Add(new DataColumn("Column5", typeof(string)));
        dt.Columns.Add(new DataColumn("Column6", typeof(string)));

        dr = dt.NewRow();
        dr["Sr.No"] = 1;
        dr["Column1"] = string.Empty;
        dr["Column2"] = string.Empty;
        dr["Column3"] = string.Empty;
        dr["Column4"] = string.Empty;
        dr["Column5"] = string.Empty;
        dr["Column6"] = string.Empty;

        dt.Rows.Add(dr);

        //Store the DataTable in ViewState
        ViewState["CurrentTable"] = dt;

        griditem.DataSource = dt;
        griditem.DataBind();
    }

Answer 1

You have to manually execute the JavaScript code that binds listeners to element within an UpdatePanel after a PostBack. So create a javascript function that you can call again when needed, not just in the document ready.

<script type="text/javascript">
    $(document).ready(function () {
        doDefaultStuff();
    });

    function doDefaultStuff() {
        //all the javascript that you would normally put in document ready
    }        
</script>

Then in code behind call that javascript function in the PostBack method.

protected void Button1_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "doDefaultStuff", "doDefaultStuff();", true);
}

Answer 2

You need to trigger calculations again after partial post back. This can be done by first wrapping all your calculation script into a function. Then call this function on document load and partial post back.

$(document).ready(function() {
    // trigger you calculations
    doMyStuff();
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // trigger you calculations
    doMyStuff();
});