Customize Masks in the MaskedTextBox through MVVM
Environment
| Product | Progress® Kendo UI® MaskedTextBox for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I use MVVM to set the mask of the Kendo UI for jQuery MaskedTextBox?
Solution
The following example demonstrates how to implement a custom MVVM binding to set the mask option of the MaskedTextBox.
<div id="example">
<div class="demo-section k-header">
<div class="box-col" style="width: 300px">
<h4>Enter a number</h4>
<input data-role="maskedtextbox"
data-bind="value: phoneNumber, mask: mask"
style="width: 200px">
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" data-bind="click: changeMask"><span class="k-button-text">Change mask</span></button>
</div>
</div>
<script>
kendo.data.binders.widget.mask = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
//call the base constructor
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
this.widget = widget;
},
refresh: function () {
var value = this.bindings.mask.get();
this.widget.setOptions({ mask: value });
}
});
var viewModel = kendo.observable({
phoneNumber: "(123) 456-6789",
mask: "(999) 000-0000",
changeMask: function() {
viewModel.set("mask", "99999");
}
});
kendo.bind($("#example"), viewModel);
</script>
</div>