This is a migrated thread and some comments may be shown as answers.

MaskedTextBoxFor doesn't work for string model property

9 Answers 762 Views

MaskedTextBox

This is a migrated thread and some comments may be shown as answers.

Bobby asked on 20 Mar 2014, 05:30 PM

I have a view model like:

1.public class MyViewModel

2.{

3. public string PhoneModel { get; set; }

4.}

That is currently rendered on my view as:

1.@model MyViewModel

2.

3.@Html.EditorFor(model => model.PhoneNumber)

With yesterday's official release of the MaskedTextBox control, I am attempting to update my view to use it instead like:

1.@model MyViewModel

2.

3.@(Html.Kendo().MaskedTextBoxFor(model => model.PhoneNumber).Mask("(999) 000-0000"))

Unfortunately, VS is complaining "Cannot implicitly convert type 'string' to 'int?'" and the view throws the same compilation error.

Looking at the following WidgetFactory metadata, the MaskedTextBoxFor is trying to return its value as an int?

1.//

2.// Summary:

3.// Creates a new Kendo.Mvc.UI.MaskedTextBox.

4.public virtual MaskedTextBoxBuilder MaskedTextBoxFor(Expression<System.Func<TModel, int?>> expression);

Phone numbers are typically too big of numbers to be represented by int, not that I would want to incur the overhead of doing so even if it was possible. Are there any plans to update the helper to return the model's data type rather than hard-coding the return type to int? ?

9 Answers, 1 is accepted

answered on 21 Mar 2014, 06:52 AM

Don't use MaskedTextBoxFor but MaskedTextBox - however you will not be happy with the output. The whole widget is kind of flakey and useless!

I've tried to use it in conjunction with strings (Placeholder will end up in the viewmodel - together with number entered) and doubles (1.0 will be displayed as 1__,_ with a mask of 000.0 - tried even 999.9).
The readonly-attribute (which works with a normal textbox) will be ignored + when you place the focus to the widget the cursor inside the textbox is at the end while it would make more sense if the cursor would be at the beginning.

We generally like the idea of the masked textbox but currently it's completely unusable.

answered on 24 Mar 2014, 10:08 AM

Hello guys,

Thank you for drawing our attention to this bug. It will be addressed in the next internal build of Telerik UI for ASP.NET MVC scheduled for this week. Bobby I updated your Telerik points because of the bug report.

With regards to other comments, the MaskedTextBox is designed to work with string values. That is why numbers are placed in the beginning of the input element.
When a readonly attribute is added, the widget will become readonly too. It behaves the same way as a normal input element does. If the widget is readonly and empty, on focus it will show the empty mask (the caret will or won't be shown depending on the browser). If the widget is readonly and not empty, then the whole text will be selected on focus. The widget behaves the same way when it is editable and not empty. The last case is when the widget is editable and empty. In this case the caret position will be persisted on focus.

Sandro, could you elaborate more why the widget is unusable in current state?

As a general suggestion, you can share your feedback in our UserVoice portal, which will help us to improve behavior of our widgets.

Regards,
Georgi Krustev
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

answered on 15 Apr 2014, 04:35 PM

Another issue I've found with the MaskedTextBoxFor is that if you are using regular expression validators via view model attributes & unobtrusive, they no longer work with empty strings. It appears to be a timing issue when the textbox loses focus. The mask is still present when the unobtrusive validation is performed on it so validation fails. Kendo removes the mask but it appears to be after validation is performed.

I'm sure there's some javascript hack I could put together to validate after a second delay or something, but its not worth it. Between the issues mentioned above and now this, I'm not going to use it the control for now.

answered on 30 Sep 2014, 11:54 AM

maskedtextbox.png

I have this EditorTemplate

<%= Html.Kendo().MaskedTextBox()

.Name(this.ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))

.Value(this.Model)

.Mask("LLL0000") %>

When I try to create a new item in a grid, it's displayed as nul___, as you can see at the attached image.
I even tried the EditorTemplate the following way, but got the same result:

<% string value = string.Empty;

if (this.Model != null)

{

value = this.Model;

} %>

<%= Html.Kendo().MaskedTextBox()

.Name(this.ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))

.Value(value)

.Mask("LLL0000") %>