Please replace this BoundField with TemplateField
<asp:BoundField DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" />
To
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<asp:TextBox ID="txtPrice" Text='<%# Eval("Price") %>' CssClass="price" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
And this JavaScript line
$("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
To
$("[id*=lblTotal]", row).html(parseFloat($(".price", row).val()) * parseFloat($(this).val()));
Complete HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtQuantity]").val("0");
});
$("[id*=txtQuantity]").live("change", function () {
if (isNaN(parseInt($(this).val()))) {
$(this).val('0');
} else {
$(this).val(parseInt($(this).val()).toString());
}
});
$("[id*=txtQuantity]").live("keyup", function () {
if (!jQuery.trim($(this).val()) == '') {
if (!isNaN(parseFloat($(this).val()))) {
var row = $(this).closest("tr");
$("[id*=lblTotal]", row).html(parseFloat($(".price", row).val()) * parseFloat($(this).val()));
}
} else {
$(this).val('');
}
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item" />
<%--<asp:BoundField DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" />--%>
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<asp:TextBox ID="txtPrice" Text='<%# Eval("Price") %>' CssClass="price" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Grand Total:
<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
dt.Rows.Add("Shirt", 200);
dt.Rows.Add("Football", 30);
dt.Rows.Add("Bat", 22.5);
GridView1.DataSource = dt;
GridView1.DataBind();
}
