How to mask phone number input in Kendo UI Grid Column

Question

We're working on a Kendo UI grid that is bound to REST endpoint. The messaging portion is working great.

Where we're having trouble is trying to mask a phone number input. We like the following behavior:

1) User clicks into phone number cell. 2) User enters 1234567890. 3) When leaving the cell, the format is changed to (123) 456-7890.

We looked already at custom formats. Those seem date/time and number specific. I haven't found a way to do a custom format for a string column.

We also looked at doing this with a formatPhoneNumber function that is called on each cell's change event. I'm not happy with that approach, though it does work.

Here is the base code for the grid. I'd like to just find a way to include a custom format, or bind to a function when defining the column or field properties.

EditGridConfig = function() {
    var self = this;

    self.gridConfig = {
        columns: [
            { field: 'PhoneNumber', title: 'Phone Number', width: '150px' },
        ],
        data: [],
        toolbar: [
            { name: "save" },
            { name: "cancel" }
        ],
        dataSource: {
            type: "json",
            transport: {
                read: "/api/BusinessEntity",
                update: {
                    url: function(parent) {
                        return "/api/BusinessEntity/" + parent.Id;
                    },
                    dataType: "json",
                    type: "PUT"
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        PhoneNumber: { type: "string" },
                    }
                }
            }
        },
        editable: "incell"
    };

    self.selectedData = ko.observable();
};

Here is the change event and formatPhoneNumber function we are using to get the phone number to format when focus leaves the cell. I'm just not happy with this approach, and am looking for a "cleaner" way to do it.

change: function (e) {
    if (e.field == "PhoneNumber") {
        console.log('before' + e.items[0].PhoneNumber);
        e.items[0].PhoneNumber = formatPhoneNumber(e.items[0].PhoneNumber);
        console.log('after' + e.items[0].PhoneNumber);
    }
}

function formatPhoneNumber(number) {
    return number.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
}

Thanks much for any suggestions!

Answer 1

Sorry for answering my own question . I thought I would add some more detail along the lines of @James McConnell's answer so other people won't struggle like I did trying to wire up the jQuery.on event with the .mask function .

Thanks to James' hint, I wound up using the Masked Input jQuery plugin and wiring up to dynamically created events using jQuery.on.

Here is the helper function I wrote (simplified for example):

applyDynamicInputMask = function(container, selector, event, mask) {
    $(container).on(event, selector, function() {
        var $this = $(this);
        $this.mask(mask);
    });
};

And to call it:

applyDynamicInputMask(document, "[name='PhoneNumber']", 'focusin', "(999) 999-9999");

Answer 2

edit: function (e) {
    //if edit click
    if (!e.model.isNew()) {
        $('input[name=Time]').attr("data-role", "maskedtextbox").attr("data-mask", "00:00");
        //init mask widget
        kendo.init($('input[name=Time]'));
    }
}

Answer 3

Have you tried a jQuery plugin? We use this one at work:

http://digitalbush.com/projects/masked-input-plugin/

You can bind the plugin to any jQuery selector, so just slap a custom class on the input that needs formatted, and use that to hook up the plugin. Not sure if this is a viable solution, but it's what I've used in the past. HTH! :)