Phone Mask Plug In

by grippstick

HTML

<link rel="stylesheet" href="http://babackofficedev.radolo.com/kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://babackofficedev.radolo.com/Kendo/Styles/kendo.flat.min.css">
<script src="http://babackofficedev.radolo.com/Kendo/js/jquery.min.js"></script>
<script src="http://babackofficedev.radolo.com/Kendo/js/kendo.all.min.js"></script>
<div id='container'>
    <input data-role='phonemask' data-area-class='fred' data-bind='areaCode:areaCode,phone:phone,ext:ext,events:{change:change,keypress:keypress}' /> <span data-bind='text:areaCode'></span>
 <span data-bind='text:phone'></span>
 <span data-bind='text:ext'></span>

</div>

JavaScript

kendo.data.binders.widget.areaCode = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        //call the base constructor
        kendo.data.Binder.fn.init.call(this, element, bindings, options);

        var that = this;

        //listen for the change event of the element, then push it to the view model
        $(this.element.areaCode).on("change", function () {
            that.change(); //call the change function
        });
    },
    refresh: function () {
        //get the element that we are bound to, then update its value from the binding
        var $element = $(this.element.areaCode);

        var value = this.bindings["areaCode"].get();
        $element.val(value);
    },
    change: function (e) {
        //the change event gets the value from the html element and pushes it to the view model
        var value = $(this.element.areaCode).val();
        this.bindings["areaCode"].set(value); //update the View-Model        
    }
});

kendo.data.binders.widget.phone = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        //call the base constructor
        kendo.data.Binder.fn.init.call(this, element, bindings, options);

        var that = this;

        //listen for the change event of the element, then push it to the view model
        $(this.element.phone).on("change", function () {
            that.change(); //call the change function
        });
    },
    refresh: function () {
        //get the element that we are bound to, then update its value from the binding
        var $element = $(this.element.phone);

        var value = this.bindings["phone"].get();
        $element.val(value);
    },
    change: function (e) {
        //the change event gets the value from the html element and pushes it to the view model
        var value = $(this.element.phone).val();
        this.bindings["phone"].set(value); //update the View-Model        
    }
});

kendo.data.binders.widget.ext =...