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

Use Custom MVVM Binding to Set the MaskedTextBox Model Value


Product Progress® Kendo UI® MaskedTextBox for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I use MVVM to set the unmasked value of the Kendo UI for jQuery MaskedTextBox?


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>
    <script> ={
            init: function (widget, bindings, options) {
                //call the base constructor
      , 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._initChange = false;
            refresh: function () {
              if (!this._initChange) {
                var value = this.bindings.raw.get();
        var viewModel = kendo.observable({
            phoneNumber: "1234566789"
        kendo.bind($("#example"), viewModel);

See Also

In this article