locked
Gridview Cell Value change handling using Javascript RRS feed

  • Question

  • User-137472927 posted

    Hi All, 

    I have a Gridview on asp.net page which has three columns - Quantity, QuantityIncrement and NewQuantity. QuantityIncrement is an editable field where user can enter any numeric value. 

    <asp:GridView runat="server" ID="gdvQuantity" Width="100%" HeaderStyle-CssClass="gvHeaderRow"
                            RowStyle-CssClass="gvRow" AutoGenerateColumns="False" 
                            DataKeyNames="itemNo" GridLines="Horizontal"
                            EmptyDataRowStyle-CssClass="gvHeaderRow">
                            <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:BoundField DataField="Quantity" HeaderText="Quantity"
                                    SortExpression="Quantity" 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="QuantityIncrement">
                                    <ItemTemplate>
                                        <asp:TextBox ID="txtQuantityInc" runat="server"></asp:TextBox>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                 <asp:BoundField DataField="NewQuantity" HeaderText="New Quantity"
                                    SortExpression="NewQuantity" 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>
                                </Columns>
                            <HeaderStyle CssClass="gvHeaderRow" />
                        </asp:GridView>

    Whenever user enter or type any value in QuantityIncrement column, this value needs to be added to value in quantity column and displayed in NewQuantity column. I need to implement this in JavaScript(client side). I also need to increment the value of asp.net label present on this page on entering of value in this QuantityIncrement column.    

    Please advise how can I implement this ASAP.

    Thanks,

    Pratham

    Saturday, March 9, 2019 5:54 PM

All replies

  • User-137472927 posted

    Hi All,

    Please reply and help in achieving above functionality ASAP.

    Thanks

    Sunday, March 10, 2019 5:25 PM
  • 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

    Monday, March 11, 2019 8:04 AM
  • User-137472927 posted

    Hi Jennifer,

    Thanks for your reply.  I tried the same way you suggested above. but it's not working for me. It seems it is not able to call JavaScript function. Below is the code for ASPX Page in application.

    
    
    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <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 () {
                    debugger;
                    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>
        <div class="row">
            <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>
        </div>
    </asp:Content>
    

    Please suggest if I am missing something.

    Thanks,

    Monday, March 11, 2019 5:25 PM
  • User839733648 posted

    Hi jainpratham27@gmail.com,

    I've tested your code and find that you've missed some symbols in your script.

    And you could use F12 developer tools to check where may cause the issue.

        <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>

    Best Regards,

    Jenifer

    Tuesday, March 12, 2019 2:17 AM
  • User-137472927 posted

    Hi Jennifer,

    Many thanks for your quick reply. It is working perfectly fine now on page loading. But I have one asp.net dropdownlist which has selectedIndexChanged event in codebehind. On selection of this dropdownlist gridview gets populated and binded again using below code:

    this.gdvQuantity.DataSource = dtItems;
    this.gdvQuantity.DataBind();

    But after grid binding in this event it stops working and don't calculate anything. Can you please suggest if I am missing something?


    Thanks,

    Tuesday, March 12, 2019 5:22 PM
  • User839733648 posted

    Hi jainpratham27@gmail.com,

    But I have one asp.net dropdownlist which has selectedIndexChanged event in codebehind.

    Which column has you populated the dropdownlist? Do you mean that you just bind one column from code-behind?

    If possible, please provide your testing code so that it will be easier to reproduce the issue and help you.

    Best Regards,

    Jenifer

    Wednesday, March 13, 2019 8:07 AM
  • User-137472927 posted

    Hi Jennifer,
    I have one function PopulateData() in my code behind of aspx page. This method is used to populate Gridview from Page_Load event and dropdownlist SelectedIndexChanged event.
    This method accepts one input parameter ItemID like below:

    PopulateData(this.dropdownlistItems.SelectedValue); // method call to populate gridview
    
    
    private void PopulateData(string itemID)    //method definition
    {
            gdvQuantity.DataSource = dtItems;
            gdvQuantity.DataBind();
    }

    dtItems is datatable returned from ADO.NET function. This datatable contains two columns "ItemNo" and "Quantity" columns. Now initially when page loads with gridview the JavaScript code works perfectly well. I am calling PopulateData() method from Page_Load event like this -

    if (!Page.IsPostBack)
    {
        PopulateData(this.dropDownListItems.SelectedValue);
    }

    Now when I select an Item from Items dropdownlist and PopulateData() method is called again and refresh gridview data for new selection. This javascript function stops working and does not add or calculate quantity.
    Can you please suggest if I am missing something?

    Thanks

    Friday, March 15, 2019 4:18 PM
  • 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

    Tuesday, March 19, 2019 6:42 AM