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

Customize Masks through MVVM Binding

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 data-bind="click: changeMask">Change mask</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

For more runnable examples on the Kendo UI MaskedTextBox, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article