Looking for a way to strip the mask before posting

34 posts, 0 answers
  1. Dirk
    Dirk avatar
    13 posts
    Member since:
    Jul 2015

    Posted 15 Feb 2016 in reply to Georgi Krustev Link to this post


    Please note that this functionality will work only for regular form
    posting. Scenarios where Kendo UI MVVM or AngularJS are used, the model
    field will be set to the masked value, because the available
    bindings/directives use widget's value method.


    Are there any plans to change that ? I am using MVVM together with a lot of maskedtextboxes and so for me the maskedTextBoxes are useless.


  2. Georgi Krustev
    Georgi Krustev avatar
    3724 posts

    Posted 16 Feb 2016 Link to this post

    Hello Dirk,

    I would suggest you us a custom MVVM binding if you would like to use the raw method instead of value. Here is a demo that demonstrates how to accomplish this task:
    We do not have any specific plans to change the current MVVM value binding behavior when used with MaskedTextBox. The proper solution for the time being is to use the shared custom MVVM binding.

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Dirk
    Dirk avatar
    13 posts
    Member since:
    Jul 2015

    Posted 17 Feb 2016 in reply to Georgi Krustev Link to this post

    Hi Georgi,

    thank you for the demo. That is exactly what i needed ! Works perfect !


    Have a nice day


  4. Akesh Gupta
    Akesh Gupta avatar
    5 posts
    Member since:
    Mar 2004

    Posted 25 Feb 2016 Link to this post

    The approach I took was to just extend the control, I just link this js file after the kendo.maskedtextbox.js file. (This was written for the 2014.3 version, but it wouldn't be difficult to modify for the current version.). This approach changes the implementation to match other kendo controls that post data in a different way than they display.

    (function ($) {
        var kendo = window.kendo,
            ui = kendo.ui,
            MaskedTextBox = ui.MaskedTextBox;
        var extendedMaskedTextBox = MaskedTextBox.extend({
            init: function (element, options) {
                var self = this,
                    id = element.id,
                    name = element.name,
                    suffix = '_input',
                    input = $(kendo.template(self._inputTemplate)({ id: id, name: name }));
                self.input = input;
                // base call to widget initialization
                MaskedTextBox.fn.init.call(this, element, options);
                element = self.element;
                // swap the data
                element.attr({ id: id + suffix, name: name + suffix });
                element.on('keyup', $.proxy(self.updateValue, self));
                element.on('blur', $.proxy(self.updateValue, self));
                // is this covered by keyup?
                element.on('paste', $.proxy(self.updateValue, self));
            updateValue: function () {
                var self = this,
                    element = self.element,
                    input = self.input,
                    options = self.options,
                    unmasked = self._unmask(element.val(), 0);
                if (options.postMaskedValue) {
                } else {
                    input.val(unmasked.replace(new RegExp(options.promptChar, "g"), ""));
            _mask: function (start, end, value, backward) {
                var self = this;
                MaskedTextBox.fn._mask.call(self, start, end, value, backward);
            _inputTemplate: '<input id="#= id #" name="#= name #" type="text" style="display:none" />',
            options: {
                sourceAction: ''
Back to Top