Gridview Cell Value change handling using Javascript
Question
All replies
-
User839733648 posted
Hi jainpratham27@gmail.com,
I suggest that you could use js to get the value and calculate the total of them.
jainpratham27@gmail.com
I also need to increment the value of asp.net label present on this page on entering of value in this QuantityIncrement column.Do you mean that you want to calculate the total of QuantityIncrement? If so, you just have to add a footertemplate to show.
I've made a sample and you could refer to.
.aspx
<!DOCTYPE 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"> $(document).ready(function () { $(".calculate").keyup(function () { Calculate(); }); function Calculate() { var disQtyTotal = 0; $('[id*=gdvQuantity] tr').each(function () { var row = $(this); var qty1 = $('[id*=txtTotalQty]', row).html(); var qty = $('[id*=txtQuantityInc]', row).val(); var total; var disQty; if (qty1 != '' && !isNaN(qty1) && qty != '' && !isNaN(qty)) { total = parseFloat(qty1) + parseFloat(qty); disQty = parseFloat(qty); disQtyTotal += disQty; $("[id*=lblGrandTotal]").html(disQtyTotal); } else if (qty1 == '' || qty == '') { total = 0; disQty = 0; disQtyTotal += disQty; $("[id*=lblGrandTotal]").html(disQtyTotal); } $('[id*=lblTotal]', row).html(total); }) } }); </script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="gdvQuantity" runat="server" HeaderStyle-CssClass="gvHeaderRow" RowStyle-CssClass="gvRow" AutoGenerateColumns="False" DataKeyNames="itemNo" GridLines="Horizontal" EmptyDataRowStyle-CssClass="gvHeaderRow" ShowFooter="true"> <RowStyle CssClass="gvRow" /> <EmptyDataRowStyle CssClass="gvHeaderRow" /> <Columns> <asp:BoundField DataField="ItemNo" HeaderText="Item No" SortExpression="ItemNo" ItemStyle-HorizontalAlign="Center" ControlStyle-Font-Names="Verdana" ControlStyle-Font-Size="10px" ReadOnly="True"> <ControlStyle Font-Names="Verdana" Font-Size="10px"></ControlStyle> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:BoundField> <asp:TemplateField HeaderText="Quantity"> <ItemTemplate> <asp:Label ID="txtTotalQty" Text='<%# Bind("Quantity") %>' runat="server" class="calculate"></asp:Label> </ItemTemplate> <ControlStyle Font-Names="Verdana" Font-Size="10px"></ControlStyle> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:TemplateField> <asp:TemplateField HeaderText="QuantityIncrement"> <ItemTemplate> <asp:TextBox ID="txtQuantityInc" runat="server" class="calculate"></asp:TextBox> </ItemTemplate> <FooterTemplate> <asp:Label ID="lblGrandTotal" runat="server" /> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="New Quantity"> <ItemTemplate> <asp:Label ID="lblTotal" runat="server" Text=" "></asp:Label> </ItemTemplate> <ControlStyle Font-Names="Verdana" Font-Size="10px"></ControlStyle> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:TemplateField> </Columns> <HeaderStyle CssClass="gvHeaderRow" /> </asp:GridView> </form> </body> </html>code-behind.
protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { DataTable dt = new DataTable(); dt.Columns.Add("ItemNo"); dt.Columns.Add("Quantity"); dt.Rows.Add("1", "1"); dt.Rows.Add("2", "2"); dt.Rows.Add("3", "3"); dt.Rows.Add("4", "4"); dt.Rows.Add("5", "5"); gdvQuantity.DataSource = dt; gdvQuantity.DataBind(); } }result:
Best Regards,
Jenifer
-
User839733648 posted
Hi jainpratham27@gmail.com,
According to your description, it seems that you have added a dropdownlist out of the gridview.
I've added a dropdownlist and found that if the dropdownlist is changed the js code still works well.
Here is my testing code.
<!DOCTYPE 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"> $(document).ready(function () { $(".calculate").keyup(function () { Calculate(); }); function Calculate() { var disQtyTotal = 0; $('[id*=gdvQuantity] tr').each(function () { var row = $(this); var qty1 = $('[id*=txtTotalQty]', row).html(); var qty = $('[id*=txtQuantityInc]', row).val(); var total; var disQty; if (qty1 != '' && !isNaN(qty1) && qty != '' && !isNaN(qty)) { total = parseFloat(qty1) + parseFloat(qty); disQty = parseFloat(qty); disQtyTotal += disQty; $("[id*=lblGrandTotal]").html(disQtyTotal); } else if (qty1 == '' || qty == '') { total = 0; disQty = 0; disQtyTotal += disQty; $("[id*=lblGrandTotal]").html(disQtyTotal); } $('[id*=lblTotal]', row).html(total); }) } }); </script> </head> <body> <form id="form1" runat="server"> <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true"> <asp:ListItem>1111</asp:ListItem> <asp:ListItem>2222</asp:ListItem> </asp:DropDownList> <asp:GridView ID="gdvQuantity" runat="server" HeaderStyle-CssClass="gvHeaderRow" RowStyle-CssClass="gvRow" AutoGenerateColumns="False" DataKeyNames="itemNo" GridLines="Horizontal" EmptyDataRowStyle-CssClass="gvHeaderRow" ShowFooter="true"> <RowStyle CssClass="gvRow" /> <EmptyDataRowStyle CssClass="gvHeaderRow" /> <Columns> <asp:BoundField DataField="ItemNo" HeaderText="Item No" SortExpression="ItemNo" ItemStyle-HorizontalAlign="Center" ControlStyle-Font-Names="Verdana" ControlStyle-Font-Size="10px" ReadOnly="True"> <ControlStyle Font-Names="Verdana" Font-Size="10px"></ControlStyle> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:BoundField> <asp:TemplateField HeaderText="Quantity"> <ItemTemplate> <asp:Label ID="txtTotalQty" Text='<%# Bind("Quantity") %>' runat="server" class="calculate"></asp:Label> </ItemTemplate> <ControlStyle Font-Names="Verdana" Font-Size="10px"></ControlStyle> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:TemplateField> <asp:TemplateField HeaderText="QuantityIncrement"> <ItemTemplate> <asp:TextBox ID="txtQuantityInc" runat="server" class="calculate"></asp:TextBox> </ItemTemplate> <FooterTemplate> <asp:Label ID="lblGrandTotal" runat="server" /> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="New Quantity"> <ItemTemplate> <asp:Label ID="lblTotal" runat="server" Text=" "></asp:Label> </ItemTemplate> <ControlStyle Font-Names="Verdana" Font-Size="10px"></ControlStyle> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:TemplateField> </Columns> <HeaderStyle CssClass="gvHeaderRow" /> </asp:GridView> </form> </body> </html>protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { PopulateData(); } } private void PopulateData() { DataTable dt = new DataTable(); dt.Columns.Add("ItemNo"); dt.Columns.Add("Quantity"); dt.Rows.Add("1", "1"); dt.Rows.Add("2", "2"); dt.Rows.Add("3", "3"); dt.Rows.Add("4", "4"); dt.Rows.Add("5", "5"); gdvQuantity.DataSource = dt; gdvQuantity.DataBind(); } protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { PopulateData(); }result;
Best Regrads,
Jenifer
