Update a Label after radtextbox text is changed via javascript

2 posts, 1 answers
  1. foxdevel
    foxdevel avatar
    4 posts
    Member since:
    Jul 2007

    Posted 03 Jun Link to this post

    I have a user control inside a databound asp:repeater.  Within the user control there is a radtextbox that allows the user to enter the desired quantity of an item.  A script will then be called to update a label control with the total for that line (quanitty * item price).  The textbox calls a javascript OnValueChanged.  The javascript is firing as it should.  The problem is that the javascript  will not update the label control.  I have tried using an asp:label and a telerik:radlabel but neither control will update.  Any help would be greatly appreciated. 

    User Control

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="custRow.ascx.vb" Inherits="custPortal.custRow" %>
     
    <div class="row">
        <div class="large-6 columns">
            <asp:Label runat="server" ID="productName">product name</asp:Label>
        </div>
        <div class="large-1 columns">
            <asp:Label runat="server" ID="productPrice" Text="$0.00"></asp:Label>
        </div>
        <div class="large-1 columns">
            <telerik:RadTextBox ID="qty" runat="server" Width="100%">
                <ClientEvents OnValueChanged="updateLine" />
     
            </telerik:RadTextBox>
        </div>
        <div class="large-1 columns">
            <asp:Label runat="server" ID="lblTotal"></asp:Label>
        </div>
        <div class="large-1 columns">
        </div>
        <div class="large-2 columns">
        </div>
    </div>
    <script type="text/javascript">
        function updateLine(sender, args) {
            var vBox = $find('<%=qty.ClientID %>');
            var pBox = document.getElementById('<%=productPrice.ClientID%>');
            var newLineTotal = sender.get_value() * pBox.innerText;
            document.getElementById('<%=lblTotal.ClientID%>').textContent = newLineTotal;
                }
    </script>

     

    Please note I have tried .textContent, .innerHTML, .innerText and .value to change the label text and none of those have worked.

    And here is the code for the ASPX page

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="index.aspx.vb" Inherits="custPortal.index" %>
     
    <%@ Register Src="~/controls/custRow.ascx" TagPrefix="uc1" TagName="custRow" %>
     
     
    <!DOCTYPE html>
     
    <html class="no-js" lang="en">
    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Foundation</title>
        <link rel="stylesheet" href="stylesheets/app.css" />
        <script src="bower_components/modernizr/modernizr.js"></script>
     
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
     
            <div class="row">
                <div class="large-12 columns">
                    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="lqProducts">
                        <ItemTemplate>
                            <uc1:custRow runat="server" ID="custRow" ItemName="ITEM" UnitPrice="50" />
                        </ItemTemplate>
                    </asp:Repeater>
                    <asp:LinqDataSource ID="lqProducts" runat="server" ContextTypeName="virtuePortal.vDbDataContext" EntityTypeName="" TableName="products">
                    </asp:LinqDataSource>
                </div>
     
            </div>
            <div class="row">
                <div class="large-6 columns">
                    <asp:LinkButton runat="server" ID="btnSUbmit" CssClass="button">Submit</asp:LinkButton>
                </div>
                <div class="large-6 columns">
                    <asp:Label runat="server" ID="myTotal"></asp:Label>
                </div>
            </div>
        </form>
     
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/foundation/js/foundation.min.js"></script>
        <script src="js/app.js"></script>
    </body>
    </html>

  2. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 08 Jun Link to this post

    Hi,

    In order to perform the calculation correctly you need to make some adjustments to the code.

    To get the value from the RadTextBox you can use the args.get_newValue() method. Note that this will return the value as string. You need to parse it to numeric.

    The same applies to the value in the label. It is retrieved as string and in order to perform calculations with it you would need to parse it and use it as a number.

    The modified code would look roughly like this:

    function updateLine(sender, args) {
        var vBox = $find('<%=qty.ClientID %>');
        var pBox = document.getElementById('<%=productPrice.ClientID%>');
        var newLineTotal = parseFloat(args.get_newValue()) * parseFloat(pBox.innerText.replace("$", ""));
         
        document.getElementById('<%=lblTotal.ClientID%>').textContent = newLineTotal;
    }


    Have in mind that the value in the label is zero, thus the calculation above would always return zero.

    Also, note that the RadTextBox accepts any characters as input. If you would like to allow only numbers to be entered you would need to add custom validation.

    Alternatively you can use RadNumericTextBox that accepts only numbers as valid input.


    Regards,
    Viktor Tachev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top