Edit this page

Bind Change Event Function to All MaskedTextBox Widgets

Environment

Product Progress Kendo UI MaskedTextBox
Progress Kendo UI 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

  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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy