Using maskedTextbox for any number

6 posts, 0 answers
  1. Michaël
    Michaël avatar
    44 posts
    Member since:
    Feb 2014

    Posted 08 Sep 2015 Link to this post

    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?

  2.
  3. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 10 Sep 2015 Link to this post

    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):
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Michaël
    Michaël avatar
    44 posts
    Member since:
    Feb 2014

    Posted 10 Sep 2015 in reply to Konstantin Dikov Link to this post

    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.

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 10 Sep 2015 Link to this post

    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:
    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. Michaël
    Michaël avatar
    44 posts
    Member since:
    Feb 2014

    Posted 10 Sep 2015 in reply to Konstantin Dikov Link to this post

    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.
  11. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 10 Sep 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top