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 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
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 16 Feb 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.

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

    Posted 17 Feb 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

    Dirk

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

    Posted 25 Feb 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
                input.data(element.data());
                element.data({});
                 
                element.attr({ id: id + suffix, name: name + suffix });
                element.after(input);
     
                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));
     
                self.updateValue();
            },
             
            updateValue: function () {
                var self = this,
                    element = self.element,
                    input = self.input,
                    options = self.options,
                    unmasked = self._unmask(element.val(), 0);
     
                if (options.postMaskedValue) {
                    input.val(element.val());
                } 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);
                self.updateValue();
            },
     
            _inputTemplate: '<input id="#= id #" name="#= name #" type="text" style="display:none" />',
     
            options: {
                sourceAction: ''
            }
        });
     
        ui.plugin(extendedMaskedTextBox);
    }(jQuery));
Back to Top
Kendo UI is VS 2017 Ready