Is it possible to remove "k-textbox" class from MaskedTextBox?

8 posts, 1 answers
  1. Alex
    Alex avatar
    11 posts
    Member since:
    Nov 2015

    Posted 07 Jan Link to this post

    Hello everyone,

     

    Is it possible to remove the "k-textbox" class from MaskedTextBox? I have my own Bootstrap/Material Design input class.

     

    <div class="form-group form-group-material-light-blue">
        @(Html.Kendo().MaskedTextBox()
              .Name("phone_number")
              .Mask("(999) 000-000-000")
              .HtmlAttributes(new {@class = "form-control floating-label mdc-text-grey-700"})
              )
    </div>

    But still after the page renders "k-textbox" gets added automatically.

     

    Please advice,

    Alex

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 08 Jan Link to this post

    Hello Alex,

    You could achieve this by using the jQuery removeClass method:
    $("#phone_number").removeClass("k-textbox");


    Regards,
    Iliana Nikolova
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alex
    Alex avatar
    11 posts
    Member since:
    Nov 2015

    Posted 08 Jan in reply to Iliana Nikolova Link to this post

    Hello Iliana,

    Thanks for your reply however when I try the above mentioned method for Grid Popup it doesn't apply to the MaskedTextbox. Because that MaskedTextbox is located inside the popup (for create and edit).

    I tried the same thing outside the Grid (as HTML razor) and it worked fine. Please see my attached image as it explains everything. I even try to apply my own checkbox but again it doesn't work as well.

    Please advice,

    Alex

  5. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 12 Jan Link to this post

    Hi Alex,

    In this case you should remove the k-textbox in the Grid edit event
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
       .Name("grid")
       //....
       .Events(ev=>ev.Edit("onEdit"))
    )
     
    <script>
    function onEdit()
       $("#phone_number").removeClass("k-textbox");
    }
    </script>


    Regards,
    Iliana Nikolova
    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
  6. Alex
    Alex avatar
    11 posts
    Member since:
    Nov 2015

    Posted 14 Jan in reply to Iliana Nikolova Link to this post

    Hello Iliana,

    Thank you so much for your quick support.

    I think it's worth mentioning that using MaskedTextBox inside Grid editor might be sometimes problematic. Because when I was binding to ViewModel there was no value inside that box so I neded

    @model string

    @{
        var attemptedValue = "";
        var modelStateForValue = Html.ViewData.ModelState[Html.IdForModel().ToString()];
        if (modelStateForValue != null)
        {
            attemptedValue = modelStateForValue.Value.AttemptedValue;
        }
    }

    <div class="form-group form-group-material-light-blue">
        @(Html.Kendo()
              .MaskedTextBox()
             .Name(Html.IdForModel().ToString())
              .Mask("(999)-000-000-000")
              .Value((!string.IsNullOrEmpty(attemptedValue)) ? attemptedValue : "")
              .HtmlAttributes(new { @class = "form-control floating-label mdc-text-grey-700" })
        )
    </div>

     

    <script>

    function onEdit() {
              $("#Phone").removeClass("k-textbox");
            };

    </script>

    Note: #Phone is the name of the field inside ViewModel, you can use anything else.

     

    Best,

    Alex

  7. Alex
    Alex avatar
    11 posts
    Member since:
    Nov 2015

    Posted 14 Jan in reply to Alex Link to this post

    I found some typos and incomplete sentence in my last message.

    "Because when I was binding to ViewModel there was no value inside that box so I needed to do the following:"

    Sorry for that :)

  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 18 Jan Link to this post

    Hello Alex,

    From the provided code snippet it appears the desired outcome is achieved - can we consider this case resolved?

    Regards,
    Iliana Nikolova
    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
  9. Alex
    Alex avatar
    11 posts
    Member since:
    Nov 2015

    Posted 18 Jan in reply to Iliana Nikolova Link to this post

    Hello Iliana,

    Yes, please mark this as resolved.

    Thanks,
    Alex

Back to Top
UI for ASP.NET MVC is VS 2017 Ready