locked
Textbox changed event doesnt work without autopostback property!! RRS feed

  • Question

  • User-869222445 posted

    I have wrote this code to sum up the values of gridview autogenerated dynamically textboxes.. It is working fine but without autopost =true code doesnt work and it is irritating that after just one entry page gets refreshed it takes time and tab button is also not working.. how to resolve this issue??

    HTML SIDE CODE:

    */gridview/*

    <asp:TemplateField HeaderStyle-CssClass="innerGridHeader" ItemStyle-CssClass="itemPadding"
    ItemStyle-Width="100px">
    <HeaderTemplate>
    Value
    </HeaderTemplate>

    <ItemTemplate>
    <asp:TextBox ID="txtValue" runat="server" CssClass="inputbox" ontextchanged="txtValue_TextChanged" AutoPostBack= "True"></asp:TextBox>

    <asp:TextBoxWatermarkExtender ID="tweValue" runat="server" WatermarkText="Enter Value"
    TargetControlID="txtValue">
    </asp:TextBoxWatermarkExtender>

    <asp:RegularExpressionValidator ID="revValue" runat="server" ControlToValidate="txtValue"
    Display="None" ErrorMessage="Value should be digit" ValidationExpression="^[0-9]+$"
    ValidationGroup="Save"></asp:RegularExpressionValidator>
    <asp:ValidatorCalloutExtender ID="vceValue" runat="server" TargetControlID="revValue"
    PopupPosition="Right" WarningIconImageUrl="~/Library/Images/exclamation.png" />

    </ItemTemplate>


    </asp:TemplateField>

    </Columns>
    </asp:GridView>
    </ContentTemplate>

    </asp:UpdatePanel>
    <br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
    <asp:Button ID="btnSaveValues" runat="server" Text="Save" CssClass="bluebutton" ValidationGroup="Save"
    Width="76px" OnClick="btnSaveValues_Click"
    Height="54px" />

    protected void txtValue_TextChanged(object sender, EventArgs e)
    {
    double total = 0;
    foreach (GridViewRow gvr in gridviewFleet.Rows)
    {
    TextBox tb = (TextBox)gvr.Cells[1].FindControl("txtValue");
    double sum;
    if (double.TryParse(tb.Text.Trim(), out sum))
    {
    total += sum;
    }
    }
    //Display the Totals in the Footer row
    //gridviewFleet.FooterRow.Cells[1].Text = total.ToString();
    TextBox1.Text = total.ToString();
    }

    Tuesday, August 8, 2017 5:56 AM

All replies

  • User2103319870 posted

    You could achieve this requirement on client side using jquery like given below

    Jquery Code

     <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
                <script>
                            $(function () {
                                $("[id*=TextBox1]").val("0");
                                var Amount = 0;
                                $("[id*=txtValue]").on("keyup", function () {
                                    debugger;
                                    //Check if number is not empty
                                    if ($.trim($(this).val()) != "")
                                        //Check if number is a valid integer
                                        if (!isNaN($(this).val()))
                                            Amount = Amount + parseFloat($(this).val());
                                    $("#TextBox1").val(Amount);
                                });
                            });
                </script>

    Complete Code

     <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
                <script>
                            $(function () {
                                $("[id*=TextBox1]").val("0");
                                var Amount = 0;
                                $("[id*=txtValue]").on("keyup", function () {
                                    debugger;
                                    //Check if number is not empty
                                    if ($.trim($(this).val()) != "")
                                        //Check if number is a valid integer
                                        if (!isNaN($(this).val()))
                                            Amount = Amount + parseFloat($(this).val());
                                    $("#TextBox1").val(Amount);
                                });
                            });
                </script>
                <asp:GridView ID="GridView3" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false">
                    <Columns>
                        <asp:BoundField DataField="AccountKey" HeaderText="Account Key" />
                        <asp:TemplateField HeaderStyle-CssClass="innerGridHeader" ItemStyle-CssClass="itemPadding"
                            ItemStyle-Width="100px">
                            <HeaderTemplate>
                                Value
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:TextBox ID="txtValue" runat="server" CssClass="inputbox"></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT top 10 [AccountKey], [ParentAccountKey], [AccountCodeAlternateKey] FROM [DimAccount]"></asp:SqlDataSource>

    Demo

    Wednesday, August 9, 2017 12:10 AM
  • User2103319870 posted

    To display the value in footer of gridview, you can use the below code

    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
                <script>
                            $(function () {
                                $("[id*=TextBox1]").val("0");
                                var Amount = 0;
                                $("[id*=txtValue]").on("keyup", function () {
                                    debugger;
                                    //Check if number is not empty
                                    if ($.trim($(this).val()) != "")
                                        //Check if number is a valid integer
                                        if (!isNaN($(this).val()))
                                            Amount = Amount + parseFloat($(this).val());
                                    $("#TextBox1").val(Amount);
                                    //Assign the value to footer
                                    $("#GridView3 span[id*='lblTotalAmount']").text(Amount);
                                });
                            });
                </script>
                <asp:GridView ID="GridView3" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" ShowFooter="True">
                    <Columns>
                        <asp:BoundField DataField="AccountKey" HeaderText="Account Key" />
                        <asp:TemplateField HeaderStyle-CssClass="innerGridHeader" ItemStyle-CssClass="itemPadding"
                            ItemStyle-Width="100px">
                            <HeaderTemplate>
                                Value
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:TextBox ID="txtValue" runat="server" CssClass="inputbox"></asp:TextBox>
                            </ItemTemplate>
                            <FooterTemplate>
                                <asp:Label ID="lblTotalAmount" runat="server"></asp:Label>
                            </FooterTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT top 10 [AccountKey], [ParentAccountKey], [AccountCodeAlternateKey] FROM [DimAccount]"></asp:SqlDataSource>

    Wednesday, August 9, 2017 12:14 AM
  • User-869222445 posted

    Thank you for your reply, I did this through java script and its working fine too.. but I'm facing one issue I have to find "total" as well and total formula is dependent on some user input values and some of database fixed values. how to retrieve database values in java script to use in formula??

    Saturday, August 12, 2017 1:41 PM
  • User2103319870 posted

    how to retrieve database values in java script to use in formula??

    You can use the database value from code behind(C#) as a parameter to javascript function

    <script type="text/javascript">
    		function CalculateTotal(databaseValue) {
    			//user variable here
    			alert(databaseValue);
    		}
    	</script>

    C#:

    //Get the database value and assign to variable here
    string dbvalue = "18";
    //then call the javascript function to calcualte total
    //Pass the value from database as parameter
    ClientScript.RegisterStartupScript(this.GetType(), "jsfunction", "CalculateTotal('" + dbvalue + "');", true);

    Sunday, August 13, 2017 2:18 AM