Radnumerictextbox: enter key and value changed on server side

7 posts, 0 answers
  1. Informat
    Informat avatar
    17 posts
    Member since:
    Oct 2008

    Posted 15 Apr 2013 Link to this post

    We've upgraded 2 weeks ago to the new Telerik version and now the clients have noticed a weird behaviour that I can't seem to solve.
    I have a repeater and in each row there's a numerictextbox. The user can go to the next line with the tab and enter key.

    With the tab key there aren't any problems. When the repeater is saved, the values of the radnumerictextbox match with the input.

    When the enter key is used, the user doesn't see any problems. But the moment that the data is saved, the value of the numerictextbox is changed to the maxvalue when there isn't a digital digit in the user's input. E.g. the maxvalue is 10 and the user enters 6 it will be saved as 10 and if the user enters 6.5 then 6.5 will be saved.
    When I debug, I notice that LastSetTextBoxValue is the only attribute that has the correct value.

    The mark-up of the numerictextbox in the HTML-page in the repeater is as follows:
    <telerik:RadNumericTextBox ID="rtbPunten" runat="server" Width="50px" Type="Number"
    IncrementSettings-InterceptArrowKeys="false" IncrementSettings-InterceptMouseWheel="false"
    MinValue
    ="0" DbValue='<%#Container.DataItem("punten")%>'
    ToolTip='<%# "punt " & Container.DataItem("nickname")%>' />

    I use the following javascript to check the value of the textbox and validate the keypress..
    function HandleError(sender, eventArgs) {
       switch (eventArgs.get_reason()) {
          case 1: // Parsing error
             $find(sender.get_id())._textBoxElement.value = $find(sender.get_id())._textBoxElement.value.replace(",", "") + ",";
             eventArgs.set_cancel(true);
             break;
          case 2: // Out of range
             setTimeout(function () {
                sender.clear();
             }, 10);
             document.getElementById(sender.get_id().replace("rtbPunten", "errPunten")).style.display = "";
             eventArgs.set_cancel(false);
             break;
       }
    }
     
    function onKeypress(sender, eventArgs, R) {
       document.getElementById(sender.get_id().replace("rtbPunten", "errPunten")).style.display = "none";
       var r = eventArgs.get_keyCode();
       if (r == 13) {
          var s = sender.get_id().split("_R_ctl")[1].replace("_rtbPunten", "");
          s = parseFloat(s) + 1;
          var n = $find(R + "_ctl" + formatNumber(s, 2) + "_rtbPunten");
          if (n) {
             setTimeout(function () {
                n.focus();
                n.selectAllText();
             }, 10);
          }
       }
    }

    In the code-behind the following settings are added:
    Dim ptn As RadNumericTextBox = CType(ri.FindControl("rtbPunten"), RadNumericTextBox)
    ptn.NumberFormat.DecimalDigits = NumberOfDigits
    ptn.MaxValue = maxPoints
    ptn.Culture = CultureInfo.GetCultureInfo("nl-BE")
    ptn.ClientEvents.OnError = "HandleError"
    ptn.ClientEvents.OnKeyPress = "keyPress"
    ptn.ClientEvents.OnValueChanged = "puntChanged"
    If ptn.Value < CDbl(hdMax.Value) Then ptn.ForeColor = Drawing.Color.Red

    Can anybody help me solve this problem?
  2. Informat
    Informat avatar
    17 posts
    Member since:
    Oct 2008

    Posted 16 Apr 2013 Link to this post

    I've also noticed that when I remove the onKeypress function and I use the enter key and save afterwards, that also the maxvalue is saved when there aren't any decimals.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Informat
    Informat avatar
    17 posts
    Member since:
    Oct 2008

    Posted 16 Apr 2013 Link to this post

    I've finally found the answer. I had to add sender.blur() in the onKeypress function.

    The function is now as follows:
    function onKeypress(sender, eventArgs, R) {
       document.getElementById(sender.get_id().replace("rtbPunten", "errPunten")).style.display = "none";
       var r = eventArgs.get_keyCode();
       if (r == 13) {
          sender.blur();
          var s = sender.get_id().split("_R_ctl")[1].replace("_rtbPunten", "");
          s = parseFloat(s) + 1;
          var n = $find(R + "_ctl" + formatNumber(s, 2) + "_rtbPunten");
          if (n) {
             setTimeout(function () {
                n.focus();
                n.selectAllText();
             }, 10);
          }
       }
    }
  5. Informat
    Informat avatar
    17 posts
    Member since:
    Oct 2008

    Posted 22 Apr 2013 Link to this post

    It seems the problem still isn't solved when the page is opened in IE9 or IE10.
    I've read following topic, but I still don't understand why the maxvalue is suddenly in the value when the postback happens.
    http://www.telerik.com/community/forums/aspnet-ajax/input/radnumerictextbox-internal-blur-event-trigers-onchange-after-onchange-has-occured.aspx

    Could someone please help?
  6. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 25 Apr 2013 Link to this post

    Hi Informat,

    I tried to replicate the problem but with no avail. It is working correct in my case, when use Enter to submit (using the AutoPostBack="true"). Or just pressing enter and then submit on keyPress manually the value is correct.
    Could you try to prepare a sample runnable web page, with reproduction of the problem and send it to us for further debugging here. You can post formal support ticket to attach the project.

    All the best,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Informat
    Informat avatar
    17 posts
    Member since:
    Oct 2008

    Posted 02 May 2013 Link to this post

    After long searching I found a solution.
    While the keypress function is executed I added another set_value, but no with the editvalue.
    There was also a problem when the user was at the last line, so I had to add the else branch in javascript to do the same.
    function onKeypress(sender, eventArgs, R) {
       document.getElementById(sender.get_id().replace("rtbPunten", "errPunten")).style.display = "none";
       var r = eventArgs.get_keyCode();
       if (r == 13) {
          var s = sender.get_id().split("_R_ctl")[1].replace("_rtbPunten", "");
          s = parseFloat(s) + 1;
          var n = $find(R + "_ctl" + formatNumber(s, 2) + "_rtbPunten");
          if (n) {
             sender.blur();
             setTimeout(function () { //nodig voor IE omdat anders de focus niet gebeurt
                n.focus();
                n.selectAllText();
                sender.set_value(sender.get_editValue());
             }, 10);
          } else {
             sender.blur();           
             setTimeout(function () {
                sender.set_value(sender.get_editValue());
             }, 10);
          }
       }
    }
  8. Frank Beerens
    Frank Beerens avatar
    26 posts
    Member since:
    Jan 2010

    Posted 03 Jun 2013 Link to this post

    Dear Telerik,

    we are experiencing the exact same problem. We have no clientside events attached. If the user presses the enter key after entering a value, and then presses our save button, the server receives a null value for the specified numerictextbox.
    Clientside the proper value is still displayed.

    We experience this behaviour in Firefox 21.0 and IE 10

    In our application, the enter key does not postback the form. We did not specify this in the body or form, but I suspect its a side effect of the used controls on the page. Either a grid or a multiview, i'm not sure at the moment.

    We did solve it by adding this to the body:
    <body onkeydown = "return (event.keyCode!=13)">


    Edit: sadly this only works in IE, not in FF.

    Edit2: we use type=currency. when we remove this type, the problem does no longer exist.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017