In this article, You will get how to implement following features in ASP.NET Gridview shopping cart using jQuery:
1. Enter Numeric quantity for product which must not exceed available quantity.
2. Calculate product wise total price based on entered quantity.
3. Calculate grand total of cart if any quantity is updated.

Consider following gridview structure:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowFooter="true" > <Columns> <asp:BoundField DataField="Code" HeaderText="Code" /> <asp:BoundField DataField="ProductName" HeaderText="Name" /> <asp:BoundField DataField="AvlQty" HeaderText="Available Qty" ItemStyle-CssClass="avlQty" /> <asp:BoundField DataField="Price" DataFormatString="{0:0.00}" ItemStyle-CssClass="price" HeaderText="Price" /> <asp:TemplateField HeaderText="Qty"> <ItemTemplate> <asp:TextBox ID="TextBoxQty" CssClass="txtQty" runat="server" Text='<%# Eval("SelQty") %>' MaxLength="5" Width="45"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBoxQty" Display="Dynamic" ForeColor="Red" ErrorMessage="RequiredFieldValidator">*</asp:RequiredFieldValidator> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Net Price"> <ItemTemplate> <span class="totalPrice"></span> </ItemTemplate> <FooterTemplate> Total: <span class="grandtotal"></span> </FooterTemplate> </asp:TemplateField> </Columns> </asp:GridView>
Here you notice that different CSS are applied on different columns. It’ll be used in jQuery to get or set values.
Let us consider dummy data to bind gridview:
//product class public class Product { public string Code { get; set; } public string ProductName { get; set; } public int AvlQty { get; set; } public int SelQty { get; set; } public double Price { get; set; } } //Get product list public List<Product> GetProducts() { var products = new List<Product>() { new Product(){ Code = "ASD123" , ProductName = "Product 1", AvlQty = 10, SelQty=1, Price = 12.5}, new Product() {Code = "BBB123", ProductName = "Product 2", AvlQty = 12, SelQty=1, Price = 15}, new Product() {Code = "CCC123", ProductName = "Product 3", AvlQty = 15, SelQty=1, Price=20}, new Product() {Code = "DDD123", ProductName = "Product 4", AvlQty = 20, SelQty=1, Price=37.5}, new Product() {Code = "EEE123", ProductName = "Product 5", AvlQty = 21, SelQty=1, Price=25} }; return products; } //To bind gridview protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GridView1.DataSource = GetProducts(); GridView1.DataBind(); } }
To implement quantity validation and total price calculation for valid quantity:
//Change price and grand total on changing qty $('#<%=GridView1.ClientID %> .txtQty').blur(function () { var $tr = $(this).parents('tr'); if ($tr.length > 0) { if (parseInt($tr.find('.avlQty').html()) < $(this).val()) { alert('Qty must not exceed available quantity.'); var $ctrl = $(this); window.setTimeout(function () { $ctrl.focus(); }, 50); return false; } $tr.find('.totalPrice').html(parseFloat($tr.find('.price').html()) * parseInt($(this).val())); } CalculateGrandTotal(); }); //To get grand Total function CalculateGrandTotal() { var grandTotal = 0.0; $('#<%=GridView1.ClientID %> tr:gt(0)').each(function () { grandTotal = grandTotal + parseFloat($(this).find('.totalPrice').length == 0 || !$(this).find('.totalPrice').html() ? 0 : $(this).find('.totalPrice').html()); }); $('#<%=GridView1.ClientID %> .grandtotal').html(grandTotal); }
To allow only numeric data in quantity textbox:
//To allow numeric character only $('#<%=GridView1.ClientID %> .txtQty').keydown(function (event) { // Allow: backspace, delete, tab, escape, and enter if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || // Allow: Ctrl+A (event.keyCode == 65 && event.ctrlKey === true) || // Allow: home, end, left, right (event.keyCode >= 35 && event.keyCode <= 39)) { // let it happen, don't do anything return; } else { // Ensure that it is a number and stop the keypress if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) { event.preventDefault(); } } });
First time,total price should be auto calculated for all products:
//First Time to display all total amount and grand total function initGrid() { $('#<%=GridView1.ClientID %> tr:gt(0)').each(function () { $(this).find('.totalPrice').html(parseFloat($(this).find('.price').html()) * parseInt($(this).find('.txtQty').val())); }); CalculateGrandTotal(); } initGrid();
Demo:
Here is the HTML rendered demo, In this requiredfield validator js code is not included, So It will not work. In following demo, Change qty in textbox, You will get total amount auto calculated:
Hope, It helps.
How to implement the javaScript in web form?
how to add discount amount in a table
What a flawless code !!! Thank you so much. You made my day. God bless you :)
I have a problem with this . i need js file can anyone give me
hi techbrij, very interesting topic,, cool shopping cart
actually rite now im facing the issues from another framework that generate the rendered cilent id.
if i saw your code in html its render like GridView1$ctl02$TextBoxQty
and u call it with #
but mine is ctl0_Main_DataGridgw_ctl1_txtQty
how do i call it in that javascript ?
really need your help for this.
ps :: im currently using prado framework.
Than you so for posting this sample code,
Hello Briji,
Good Example. Have you tried it with a grid having more than 100 rows?
Thanks