Mask without literals not functional if initialized from markup

5 posts, 0 answers
  1. Tim Byng
    Tim  Byng avatar
    6 posts
    Member since:
    Sep 2005

    Posted 10 Aug 2015 Link to this post

    Steps to reproduce (demo):

    1. Define the mask in markup. Example:
      <input id="someNumber" value="003123456" data-role="maskedtextbox" data-mask="0000000000" />
    2. Initialize using kendo.init()

    Expected results:

    Textbox shows prompt chars on focus, only allows characters defined in mask, etc.

    Actual results:

    Textobx does not show prompt chars on focus (or shows "undefined" if data-clear-prompt-char is set to true), allows any characters.

    Other info:

    The issue does not happen if a) there is a literal in the mask, or b) the component is initialized through JS, such as $(selector).kendoMaskedTextBox(options).

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 12 Aug 2015 Link to this post

    Hello Tim,

    Thank you for contacting us.

    This is due to a code within the kendo.initWidget logic and the parseOption method in particular. Currently, having such mask with only digits without literal will not work with the kendo.init method and in order to overcome that limitation you could try to use custom rule:
    data-rules="{'~': function(c){return c >= '0' && c <= '9'}}"/>

    Following is a dojo example with the above approach:
    Nevertheless, I will log the issue, so our developers could further investigate the scenario and determine whether or not a fix could be introduced.

    Please excuse us for any inconvenience caused by this.


    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Dirk
    Dirk avatar
    13 posts
    Member since:
    Jul 2015

    Posted 26 Jan in reply to Konstantin Dikov Link to this post

    Hello Konstantin,

    i just came around this error and tried your solution. Sorry to say, but it doesn't work with a bind construction like this:

     

    <input id="ti_katalogseite_von"
    data-role="maskedtextbox"
    data-mask="000"
    data-bind="value: selected.katalogseite_von"
    data-rules="{'~': function(c){return c >= '0' && c <= '9'}}"
    style="width: 100%;"/>

     

    Very frustration - the maskedtextbox was the main reason we bought kendo

     

    Regards

    Dirk

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 26 Jan Link to this post

    Hi Dirk,

    As demonstrated in the dojo example in my previous post, in order to use mask that contains only numbers you need to use custom mask and custom rule. With that in mind, your data-mask should be "~~~":
    <input id="ti_katalogseite_von"
      data-role="maskedtextbox"
      data-mask="~~~"
      data-bind="value: selected.katalogseite_von"
      data-rules="{'~': function(c){return c >= '0' && c <= '9'}}"
    style="width: 100%;"/>

    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!
     
  6. Dirk
    Dirk avatar
    13 posts
    Member since:
    Jul 2015

    Posted 26 Jan in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

     

    thanks and sorry - i look the whole time at a different line in the editor - now it works fine !

     

    Dirk

Back to Top
Kendo UI is VS 2017 Ready