I have a user control inside a asp:repeater. Within the user there is a 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 ( * 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 : 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>
1 Answer, 1 is accepted
0
Accepted
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:
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
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.