Edit this page

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>
        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: "(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.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article