Mask without literals not functional if initialized from markup

[Tim]

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).

[Konstantin Dikov]

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:

• http://dojo.telerik.com/IDIxu/6

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

 

 

[Dirk]

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

[Konstantin Dikov]

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

 

 

[Dirk]

Hi Konstantin,

 

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

 

Dirk