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: "[phone]",
            mask: "[phone]",
            changeMask: function() {
                viewModel.set("mask", "99999");
            }
        });

        kendo.bind($("#example"), viewModel);
    </script>
</div>

See Also

• Basic Usage of the MaskedTextBox (Demo)
• Using the API of the MaskedTextBox (Demo)
• JavaScript API Reference of the MaskedTextBox