I am using Kendo UI Masked Textbox and MVVM value binding.
The viewmodel phonenumber does not contain any prompt characters like "()-" it contains simply the numbers.
var viewModel = kendo.observable({
phoneNumber: "1234567890",
onChange: function () {
alert("event :: change " + this.get("phoneNumber"));
}
});
kendo.bind($("#example"), viewModel);
When you change the value in the form and inspect the viewModel phoneNumber (see onchange function). The phoneNumber now contains special/prompt characters e.g. phoneNumber: "(444) 555-5555"
This is my problem, i expect the value of the MaskedTextbox to return only numbers phoneNumber: "4445555555" not with the special characters.
Did some more research and found the answer
Workaround for unmasking values that are databound to an observable when using MVVM. A single maskedtextbox change event handler can strip the formatting for any value binding:
<ul data-role="listview">
<li>
<label>
Home Phone:
<input type="text" data-role="maskedtextbox" data-bind="value: homePhone, events: { change: maskStrip }" data-mask="(000) 000-0000" />
</label>
</li>
<li>
<label>
Cell Phone:
<input type="text" data-role="maskedtextbox" data-bind="value: cellPhone, events: { change: maskStrip }" data-mask="(000) 000-0000"/>
</label>
</li>
</ul>
var vm = kendo.observable({
homePhone: null,
cellPhone: null,
maskStrip: function (e) {
var that = e.sender,
stripped = that._unmask(that.value()),
obs = e.data,
val = that.element.data("bind");
if (val) {
val = val.substring(val.indexOf('value: ') + 7); //remove properties before
if (val.indexOf(',') > -1) val = val.substring(0, val.indexOf(',')); //remove properties after
obs.set(val, stripped);
}
}
});