Radnumerictextbox: enter key and value changed on server side

[Informat]

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?

[Informat]

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.

[Informat]

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);
      }
   }
}

[Informat]

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?

[Vasil]

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

[Informat]

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);
      }
   }
}

[Frank Beerens]

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.