Built-in Error Message on EditorTemplate Combo-Box Column

[Andrei]

I have a grid with several foreign key columns which display combo-box editor templates. The user enters and selects an item, which sets the id on that column for that record in the grid.

If the user unfocuses the cell without selecting an option, the built-in validation message (shown in the attached screenshot) 'X must be a number' appears. This occurs when the input does not load any data (i.e. they type a name that doesn't exist in the database and so auto-complete doesn't find anything). It seems the validation skips the 'required' message and goes to this invalid-type message. We would like to change or bypass this so that the user doesn't see this user-unfriendly message.

Is there a way to (1) somehow force the combo-box to select an option when losing focus in this case where there was no valid auto-complete option (since normally it does auto-select said option), or (2) to somehow override this error message?

[Alex Hajigeorgieva]

Hi, Andrei,

Thank you for the great description and the screenshot to illustrate your case.

To get the desired result, follow the same validation principles in MVC as you do without the Kendo UI Validator. The built-in validation attributes are taken from the model. To supply a custom required message and a human friendly property name, add it in the model attributes:

[Required]
[Display(Name = "Pool Name")]
public int ForeignColumnId { get; set; }

 

Or if you prefer, provide your own custom required message:

[Required(ErrorMessage = "My custom error message!")]
public int ForeignColumnId { get; set; }

 

For the built-in "The field must be a number." message, things are more complicated as explained in this SO thread:

https://stackoverflow.com/questions/4828297/how-to-change-data-val-number-message-validation-in-mvc-while-it-is-generated

However, it seems that you can easily override the message via HtmlAttributes as this poster suggests:

@model object
           
@(Html.Kendo().ComboBoxFor(m => m)
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
        .HtmlAttributes(new { data_val_number="Supply a valid code!" })
)

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Andrei]

Hi Alex,

I don't think the first approach applies, because this column is required conditionally based on the value of another column (this has been implemented as a custom validation rule).

However, after a quick test, the second approach to override the 'must be a number' method worked.

Thank you for the assistance!

[Alex Hajigeorgieva]

Hello, Andrei,

For custom validation rules, you would need to extend the client-side validator and the messages will be added dynamically everytime the cell/row is about to close like this online demo:

https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation

Also relevant to custom attributes is this article:

https://docs.telerik.com/aspnet-mvc/getting-started/helper-basics/validation#implementing-custom-attributes

Kind Regards,
Alex Hajigeorgieva
Progress Telerik