Change with below JavaScript code.
<body>
<form id="form1" runat="server">
<asp:GridView ID="Gridview1" runat="server" Font-Size="x-Small" ShowFooter="True" AutoGenerateColumns="False" OnRowCreated="Gridview1_RowCreated"
class="table table-striped table-condensed table-bordered" Style="max-width: 100%" HeaderStyle-ForeColor="White" Height="50px" HeaderStyle-Height="10px" HeaderStyle-BackColor="Black">
<Columns>
<asp:TemplateField HeaderText="Item Decription" ItemStyle-Width="47%">
<ItemTemplate>
<asp:TextBox ID="textBox1" runat="server" Class="form-control" Width="100%" Font-Size="Small" TextMode="MultiLine" Style="overflow: hidden; resize: none;" oninput="Resize(this)" />
<script type="text/javascript">
function Resize(textbox) {
textbox.style.height = "";
textbox.style.height = Math.min(textbox.scrollHeight, 300) + "px";
}
</script>
</ItemTemplate>
<FooterStyle HorizontalAlign="Left" />
<FooterTemplate>
<asp:Button ID="ButtonAdd" runat="server" Class="btn btn-primary" BackColor="SteelBlue" Font-Size="Small" Text="+ Item" OnClick="ButtonAdd_Click" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity" ItemStyle-Width="11%">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" Height="25" Font-Size="Small" runat="server" Width="100%"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Rate" ItemStyle-Width="19%">
<ItemTemplate>
<span class="currency-symbol" style="font-weight: bolder">NGN</span>
<asp:TextBox ID="txtRate" Height="25" runat="server" Width="80%"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount" ItemStyle-Width="17%">
<ItemTemplate>
<span class="currency-symbol" style="font-weight: bolder">NGN</span>
<asp:Label ID="lblAmount" runat="server" Text="0" Font-Bold="True"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" ForeColor="Red" runat="server" OnClick="LinkButton1_Click">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/del6.png" Height="25" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle Height="10px" />
</asp:GridView>
<hr />
<br />
<div class="total">
<asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Total"></asp:Label>
<asp:Label ID="lblTotal" runat="server" Text=""></asp:Label>
<br />
<br />
<asp:Label ID="Label5" runat="server" Font-Bold="true" Text="VAT (%):"></asp:Label>
<asp:TextBox ID="txtVAT" runat="server" CssClass="form-control" Font-Size="Small" placeholder="Value Added Tax"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label6" runat="server" Font-Bold="true" Text="GRAND TOTAL:"></asp:Label>
<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
<br />
<br />
<br />
<br />
<br />
</div>
</form>
<link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/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">
$(function () {
CalculateTotal();
});
$("body").on("change keyup", "[id*=txtQuantity],[id*=txtRate],[id*=txtVAT]", function () {
var row = $(this).closest("tr");
//Check whether Quantity value is valid Float number.
var quantity = parseFloat($.trim($(row).find("[id*=txtQuantity]").val()));
if (isNaN(quantity)) {
quantity = 0;
}
var rate = parseFloat($.trim($(row).find("[id*=txtRate]").val()));
if (isNaN(rate)) {
rate = 0;
}
//Calculate and update Row Total.
$("[id*=lblAmount]", row).html(quantity * rate);
CalculateTotal();
});
function CalculateTotal() {
//Calculate and update Grand Total.
var grandTotal = 0;
$("[id*=lblAmount]").each(function () {
if (!isNaN($(this).html())) {
grandTotal = grandTotal + parseFloat($(this).html());
}
});
$("[id*=lblTotal]").html(grandTotal);
var vat = parseInt($("[id*=txtVAT]").val()) / 100;
grandTotal = grandTotal + (grandTotal * vat);
$("[id*=lblGrandTotal]").html(grandTotal.toString());
}
</script>
</body>