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

[Alex]

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

 

[Iliana Dyankova]

Hello Alex,

You could achieve this by using the jQuery removeClass method:

$("#phone_number").removeClass("k-textbox");

Regards,
Iliana Nikolova
Telerik

[Alex]

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

[Iliana Dyankova]

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

[Alex]

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

[Alex]

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 :)

[Iliana Dyankova]

Hello Alex,

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

Regards,
Iliana Nikolova
Telerik

[Alex]

Hello Iliana,

Yes, please mark this as resolved.

Thanks,
Alex