Using maskedTextbox for any number

[Michaël]

Hi,

 

I'm trying to use the MaskedTextBox to format currency number. However, the fact that we can only set one mask is too limited. For instance, I'd like that if the user write "111", it formats "111". Then if user write an additional number, like "1111", it formats as "1 111", then by adding another number, it formats as "11 111", then "111 111", then "1 111 111" and so on...

 Is this possible?

[Konstantin Dikov]

Hi Michaël,

For the requirement that you have you should use the NumericTextBox widget, instead of the MaskedTextBox, because the NumericTextBox will format the values as per your requirement when you use the currency format. Additionally, it will apply the correct currency format for the used culture. Following is a dojo example demonstrating such implementation (the first NumericTextBox):

• http://dojo.telerik.com/OhIqI

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Michaël]

Hi Konstantin,

 

Unfortunately that's not really what I want, becuase this component always apply the formatting (adding space) after validating. I'd like it to automatically add spaces while you're typing.

[Konstantin Dikov]

Hi ,

The closest to your requirement behavior that you can achieve with MaskedTextBox is the one from the following example, where you define a mask with the spaces:

• http://dojo.telerik.com/IFoJU

As for the NumericTextBox, you are correct that the value will be formatted only after you blur the input element, so for formatting while typing, the only valid option will be the one from the above example.


Regards,
Konstantin Dikov
Telerik

 

 

[Michaël]

Unfortunately that's not really what I want :(. Is there any way to change the mask at runtime? Therefore, depending on the number of numbers, I could change the mask.

[Konstantin Dikov]

Hi ,

If you want to change the mask you can get the original options and change the mask property. When you create the new mask you can use setOptions with the modified options to apply the new mask.

var maskedTextBox =  $("#maskedtextbox").data("kendoMaskedTextBox");
var count = maskedTextBox.raw().length; //will return the raw value
var options = maskedTextBox.options; //getting the original options
var newMask = ..//create your new mask
options.mask = "$ " + newMask;
maskedTextBox.setOptions(options);

Regards,
Konstantin Dikov
Telerik