[Solved] Leading Decimal Point in NumericTextBox Editor

[Bob Mills]

Hi,

I've discovered an issue in the MVC NumericTextBox that I have been able to work around, but I wanted to submit my changes to Telerik for review.

Using the MVC Grid with Keyboard Navigation, a NumericTextBox editor, the user cannot use the Tab key to exit the cell if you enter a decimal point as the first character, instead of a 0.  The field will accept values less than 1 but greater than 0, however validation fails and prevents the user from exiting the cell correctly.

You can reproduce the behavior in the Telerik ASP.NET MVC Demo, using the Keyboard Navigation Sample (http://demos.telerik.com/aspnet-mvc/grid/keyboardnavigation).  All you need to do is attempt to enter a less than 1 but greater than 0 value without a leading zero in the unit price field on one of the rows (such as .25, see attached screenshots). Type .25, then press the TAB key.  You will be presented with the error in the attached screenshot.

I believe this problem to be two-fold after investigation.  First of all, in telerik.textbox.min.js, beginning at line 219 reads:

if (key == 8 || key == 46 || key == 13) { //backspace and delete
     setTimeout($.proxy(function () {
          this._update(this.parse($element.val()));
     }, this));
     return true;
}

In this code, the tab key is not taken into account for updating the element.  I changed this to support the tab key, but then I ran into the second problem.  Even with keyCode 9 taken into account, the fact that the update is occurring after a delay causing the grid to still fail when validating the editor.  I solved this problem by having the Enter and Tab keys in their own if statements, without the setTimeout, as follows:

if (key == 8 || key == 46) { //backspace and delete
     setTimeout($.proxy(function () {
          this._update(this.parse($element.val()));
     }, this));
     return true;
}

if (key == 13 || key == 9) {
     this._update(this.parse($element.val()));
     return true;
}

This change now allows me to use the enter and tab keys properly, and also allows me to use a decimal value in the NumericTextBox editor, without need a 0 first.

Here's the change for the minified version of the javascript:

Change this text:

if(q==8||q==46||q==13){setTimeout(a.proxy(function(){this._update(this.parse(h.val()))},this));return true}

to this:

if(q==8||q==46){setTimeout(a.proxy(function(){this._update(this.parse(h.val()))},this));return true}if(q==13||q==9){this._update(this.parse(h.val()));return true

I realize that not using the setTimeout function could have other affects, and their may be a different way to handle this.  This is how I got this to work, and if there are any suggestions from Telerik on how I can solve this problem better, please let me know.

Thanks.

[Georgi Krustev]

Hello Bob,

 
Thank you for pointing this issue and for providing a solution for it. The fix will be included in the next internal build of Telerik Extensions for ASP.NET MVC.

As a gratitude for your involvement I have updated your Telerik points.

Kind regards,
Georgi Krustev
the Telerik team