Grid Validation message bubble in PopUp Edit Template

[Shawn]

Hello,

I have been trying to figure out how to implement the "validation bubble" (see attached) like the one that is displayed in the following example: Custom validator editing

My validation messages appear either on the side of the input field, or they push everything down and display below the input field, or they show up on top of the input field where the input field is no longer visible.  I'd really like to know how to show a bubble with the small arrow above it just like in the attached picture.  I'm not sure if this is done via a theme, but the theme I'm working with doesn't seem to have this functionality.  An example would be very much appreciated.  Thanks.

Regards,

Shawn A.

[Tsvetina]

Hi Shawn,

To display the built-in validation messages in the Grid, you just need to add validation rules to the model:

public class Person
{
    public int PersonID { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public DateTime BirthDate { get; set; }
}

and ValidationMessageFor helpers in the popup template:

<div class="k-edit-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="k-edit-field">
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>


<div class="k-edit-label">
    @Html.LabelFor(model => model.BirthDate)
</div>
<div class="k-edit-field">
    @Html.Kendo().DateTimePickerFor(model => model.BirthDate)
    @Html.ValidationMessageFor(model => model.BirthDate)
</div>

I am attaching a sample project that includes a Grid with a custom popup editor and properly working validation tooltips. Try it out and let me know if you still can't find what is missing in your project.

Regards,
Tsvetina
Progress Telerik

[Shawn]

Hello Tsvetina,

Thank you for your reply!

Unfortunately, I don't think I have explained my issue properly.  I am familiar with how to implement validation as you've demonstrated.  My issue is with the styling of the validation message in the PopUp editor of my grid (or any other view page).  When I implement the message with the "@Html.ValidationMessageFor(model => model.Name)", I see a message that is under the input field.  It cosists of an exclamation mark image and the validation message underneath it (see attached ValidationPopUp2).  This message pushes every other input element down on the form, or sometimes it appears on the right side of the input element.  I'm trying to get the validation message to look like the yellow "tooltip" style with the litle triangular arrow on top of it pointing to the input element hovering above other input elements (see attached ValidationPopUp1).

In my research I've come across "errorTemplate" for the kendoValidator for Kendo UI for MVC, where, supposedly, you can use this to style the error message with a "<span class="k-invalid-msg"...>".  Unfortunately, this doesn't seem to be available for Kendo UI for MVC Core.

Any ideas/examples as to how I can style my validation messages to look like the attached ValidationPopUp1?

Thanks,

Shawn A.

[Tsvetina]

Hello Shawn,

When using any of the Kendo UI skins, the validation popups are styled out of the box and you don't need to make any explicit styling. 

I see you have some custom styling. Is it a completely custom skin or the styles are added on top of a Kendo UI skin? Can you share the custom CSS with us? Also, you can test to confirm that the problem comes from the custom styles if you temporarily replace them with an unmodified Kendo UI theme.

Regards,
Tsvetina
Progress Telerik

[Shawn]

Hello Tsvetina,

I am using a theme that I created using the "Progress Sass ThemeBuilder" for ASP.NET Core "based on Bootstrap 4".  I've tried to attached my css files to this post, but the size is larger than 2MB (even zipped) and the site will now allow me to.

Here is what I have in my _Layout.cshtml view for styling:

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/My_Bootstrap.css" />

 

I did as you suggested and replaced My_Bootstrap with this: 

<link href="~/lib/kendo-ui/styles/kendo.blueopal.min.css" rel="stylesheet" />

The styles did change a little bit and the validation message displayed as a yello bubble (with no arrow pointing to the input field), but it still shifted everything around.

Thanks,

Shawn A.

 

[Tsvetina]

Hello Shawn,

I tested with the original Bootstrap-v4 theme and reproduced the issue with a popup edit form. Unfortunately, it looks like a bug in the theme where some of the styles for the validation tooltip are only applied to the inline and incell editors but not inside the popup editor. I forwarded it to the development team.
Currently, you should be able to fix this by adding the following styles to your project:

.k-popup-edit-form .k-tooltip.k-tooltip-validation {
    color: #fff;
    background-color: #000;
}

.k-popup-edit-form .k-tooltip.k-tooltip-validation {
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    width: auto;
    padding: .5rem 1rem;
}

.k-popup-edit-form .k-tooltip.k-tooltip-validation .k-callout-n {
    border-bottom-color: #000;
}

.k-popup-edit-form .k-tooltip.k-tooltip-validation .k-callout {
    display: block;
}

With regard to the BlueOpal theme, it probably didn't work because of a missing common file. The older themes also use a kendo.common.min.css file:

<link href="~/lib/kendo-ui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/lib/kendo-ui/styles/kendo.blueopal.min.css" rel="stylesheet" />

Regards,
Tsvetina
Progress Telerik

[Shawn]

Hello Tsvetina,

Thank you!  This is exactly what I was looking for.  Hopefully, the development team will be able to fix this bug soon, but in the meantime your workaround works perfectly.

Regards,

Shawn A.