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

Customize Masks in the MaskedTextBox through MVVM


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


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>
    <script> ={
            init: function (widget, bindings, options) {
                //call the base constructor
      , 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);

See Also

In this article