Add new row to Bottom of ASP.Net DataGrid using jQuery

Hi Amitabha,

Remove AutoPostBack="true" and OnTextChanged event from TextBox and use jQuery on change event to do the task of that row.

HTML

<div class="col-lg-12 with-border table-bordered">
    <asp:DataGrid ID="gridInvoice" runat="server" HeaderStyle-BackColor="SlateGray" HeaderStyle-ForeColor="White"
        ItemStyle-Font-Size="Small" FooterStyle-Font-Size="Small"
        AutoGenerateColumns="false" class="table table-striped table-bordered" Width="100%">
        <Columns>
            <asp:TemplateColumn HeaderText="EwayBill Number">
                <ItemTemplate>
                    <asp:TextBox ID="txtInvEwayBillNo" runat="server" CssClass=" form-control" Width="180px" MaxLength="12"
                        Text='<%#DataBinder.Eval(Container.DataItem,"EWAYBILL_NO")%>'>
                    </asp:TextBox>
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="EwayBill Valid From">
                <ItemTemplate>
                    <asp:TextBox ID="txtInvEwayFrmDt" runat="server" CssClass=" form-control" Width="120px"
                        Text='<%#DataBinder.Eval(Container.DataItem,"EWAYBILL_DT")%>'>
                    </asp:TextBox>
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="EwayBill Valid To">
                <ItemTemplate>
                    <asp:TextBox ID="txtInvEwayToDt" runat="server" CssClass=" form-control" Width="120px"
                        Text='<%#DataBinder.Eval(Container.DataItem,"EWAYBILL_VALID")%>'>
                    </asp:TextBox>
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="Invoice Number">
                <ItemTemplate>
                    <asp:TextBox ID="txtInvNo" runat="server" CssClass=" form-control" Width="180px"
                        Text='<%#DataBinder.Eval(Container.DataItem,"INVOICE_NO")%>'>
                    </asp:TextBox>
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="Invoice Date">
                <ItemTemplate>
                    <asp:TextBox ID="txtInvDt" runat="server" CssClass=" form-control" Width="120px"
                        Text='<%#DataBinder.Eval(Container.DataItem,"INVOICE_DATE")%>'>
                    </asp:TextBox>
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn HeaderText="Invoice Value">
                <ItemTemplate>
                    <asp:TextBox ID="txtInvValue" runat="server" CssClass=" form-control" Width="120px"
                        Text='<%#DataBinder.Eval(Container.DataItem,"INVOICE_VALUE")%>'>
                    </asp:TextBox>
                </ItemTemplate>
            </asp:TemplateColumn>
        </Columns>
    </asp:DataGrid>
    <asp:Button ID="btnAddRow" CssClass="btn btn-sm bg-gray-active" Text="Add Row" runat="server" />
</div>
<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.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        var gridView = $("[id*=gridInvoice]");
        var row = gridView.find("tr").eq(1).clone();
        $(row).find('input[type=text]').attr('value', '');
        $("[id*=btnAddRow]").click(function () {
            var preindex = $(this).parent().parent().prev().find("td").eq(0).html();
            $("<tr>" + row.html() + "</tr>").insertAfter(gridView.find("tr:last"));
            $(this).parent().parent().prev().find("td").eq(0).html((parseInt(preindex) + 1))
            return false;
        });

        $(document).on('change', '[id*=txtInvEwayBillNo]', function () {
            var row = $(this).closest('tr');
            alert($(row).html());
        });
    });
</script>