KendoMaskedTextBox bind unmasked value

8 posts, 1 answers
  1. Michael
    Michael avatar
    68 posts
    Member since:
    Dec 2010

    Posted 09 Nov 2018 Link to this post

    How can I make the KendoMaskedTextBox for Vue bind with v-model against the unmasked value?  For example, if my mask is "00000-0000" for a US postal code, and I enter "30157" in the control, it will currently bind "30157-____".  I need it to bind as "30157" (no hyphen, and no underscores).  I could strip out what I don't want on the server, but it seems like that shouldn't be necessary.

     

  2.
  3. Nencho
    Admin
    Nencho avatar
    1823 posts

    Posted 13 Nov 2018 Link to this post

    Hello Michael,

    You can use computed property and raw() method of the maskedtextbox, which will return you the value without the mask. The Example below shows such implementation:

    https://stackblitz.com/edit/w3zycn-wrqpqy?file=index.html

    Hope this would help.


    Regards,
    Nencho
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Michael
    Michael avatar
    68 posts
    Member since:
    Dec 2010

    Posted 15 Nov 2018 in reply to Nencho Link to this post

    Thanks!  We're using v-model against a property on an object that came back from a service call.  I think ideally, there would just be an option you can specify on kendoMaskedTextbox that tells it whether to bind against the raw value or not.  That would have required zero changes in my component, and just a minor change in the template.
  7. Answer
    Nencho
    Admin
    Nencho avatar
    1823 posts

    Posted 19 Nov 2018 Link to this post

    Hello Michael,

    I understand your point. That being said, I can suggest you a slight alternative of the previous approach:

    https://stackblitz.com/edit/w3zycn-wrqpqy?file=index.html

    The above example following the Vue Model Binding and it does require only a specification of the value for the model:

    https://www.telerik.com/kendo-vue-ui/components/framework/model-binding/#toc-events

    Hope this would help.

    Regards,
    Nencho
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8.
  9. Michael
    Michael avatar
    68 posts
    Member since:
    Dec 2010

    Posted 19 Nov 2018 in reply to Nencho Link to this post

    That does seem to work in conjunction with v-model as well, so we at least have something that works from the view.  I think other people are going to need this capability too, and it should just be a simple boolean property to control how it binds, if you're able to log that somewhere.  Thanks!
  11. Nencho
    Admin
    Nencho avatar
    1823 posts

    Posted 21 Nov 2018 Link to this post

    Hello Michael,

    I have created a Feature Request on your behalf in your brain new Feedback Portal below:

    https://feedback.telerik.com/kendo-vue-ui/1362250-add-the-ability-to-implement-model-binding-to-the-raw-value-of-the-maskedtextbox

    You can vote for and track the item in the link above.

    Regards,
    Nencho
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Zerry
    Zerry avatar
    1 posts
    Member since:
    Jan 2019

    Posted 18 Mar in reply to Nencho Link to this post

    Nencho said:Hello Michael,

    I understand your point. That being said, I can suggest you a slight alternative of the previous approach:

    The above example following the Vue Model Binding and it does require only a specification of the value for the model:

    Hope this would help.

    Regards,
    Nencho
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

    I think ideally, there would just be an option you can specify on kendoMaskedTextbox that tells it whether to bind against the raw value or not.

  14.
  15. Nencho
    Admin
    Nencho avatar
    1823 posts

    Posted 19 Mar Link to this post

    Hello Michael,

    Thanks for the additional specification. Generally, I would suggest you have your comment added to the FeedBack portal as well. I have updated it, though, having your comment added to the specification of the item.

    https://feedback.telerik.com/kendo-vue-ui/1362250-add-the-ability-to-implement-model-binding-to-the-raw-value-of-the-maskedtextbox

    Thanks for your suggestion!

    Regards,
    Nencho
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top