New to Kendo UI for jQuery? Download free 30-day trial

Use Custom MVVM Binding to Set the MaskedTextBox Model Value

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 unmasked value of the Kendo UI for jQuery MaskedTextBox?

Solution

The following example demonstrates how to implement a custom MVVM binding to set the model value 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-mask="(999) 000-0000"
                   data-bind="raw: phoneNumber"
                   style="width: 200px">

            <span data-bind="text: phoneNumber"></span>
        </div>
    </div>
    <script>
        kendo.data.binders.widget.raw = 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;
                this._change = $.proxy(this.change, this);
                this.widget.first("change", this._change);
                this._initChange = false;
            },
            change: function() {
              var that = this;
              var value = that.widget.raw();

              that._initChange = true;

              that.bindings.raw.set(value);

              that._initChange = false;
            },
            refresh: function () {
              if (!this._initChange) {
                var value = this.bindings.raw.get();
                this.widget.value(value);
              }
            }
        });
        var viewModel = kendo.observable({
            phoneNumber: "1234566789"
        });
        kendo.bind($("#example"), viewModel);
    </script>
</div>

See Also

In this article