Bind Change Event Function to All MaskedTextBox Widgets

Environment

Product	Progress® Kendo UI® MaskedTextBox for jQuery
Product Version	Created with the 2017.3.1026 version

Description

How can I bind the change events of all MaskedTextBoxes to a single event handler function?

Solution

To bind all the widgets, utilize any of the following approaches:

• After the page loads
• Before the page loads

After the Page Loads

1. After all the MaskedTextBoxes initialize, select them with the jQuery data-role attribute selector.
2. Loop through the array and attach the change handler to every MaskedTextBox.

<input id="maskedtextbox1" />
<input id="maskedtextbox2" />
<input id="maskedtextbox3" />

<script>
    $("input").kendoMaskedTextBox();

    var mtbs = $("[data-role='maskedtextbox']");

    mtbs.each(function(e) {
        var mtb = $(this).data("kendoMaskedTextBox");

        mtb.bind("change", SomeFunction);
    });

    function SomeFunction(e) {
        alert(this.value());
    }
</script>

Before the Page Loads

Override the default change event handler function before the MaskedTextBoxes initializes.

<script>
    function SomeFunction(e) {
        alert(this.value());
    };

    $.fn.kendoMaskedTextBox.widget.fn._change = SomeFunction
</script>

<input id="maskedtextbox1" />
<input id="maskedtextbox2" />
<input id="maskedtextbox3" />

<script>
    $("input").kendoMaskedTextBox();
</script>