[Solved] Grid Validation Tooltip Styling

[Danielle]

I have several grids with inline dropdown editors.  The system users are complaining that the validation tooltips block the top options for the dropdown.  Is there a way to specify that their position be placed at the top of the field rather than the bottom.

[Austin]

[REMOVED]

[Austin]

There isn’t a built-in Grid option for validation tooltip placement. It comes from the Kendo Validator.

However, you can override it with grid-scoped CSS:

 

.my-grid .k-tooltip-validation,
.my-grid .k-invalid-msg {
    position: absolute;
    bottom: 100%;
    top: auto;
    left: 0;
    margin-bottom: 4px;
    z-index: 10000;
}

.my-grid .k-tooltip-validation .k-callout,
.my-grid .k-invalid-msg .k-callout {
    display: none;
}

 

Then scope it to the grid:

.HtmlAttributes(new { @class = "my-grid" })

[Eyup]

Hi Austin,

Thank you for sharing your approach! The CSS solution provided looks correct for repositioning Kendo UI Grid validation tooltips above the input fields instead of below them.

Danielle, please let me know if you need further assistance with this.

[Danielle]

Austin,

Thank you! That is a great start.  For some reason it didn't translate completely for me.  The messages are appearing above the grid. 

I might have some conflicting rules that are getting in the way so I'll look at it more - but this is a great start. 

If I find hte specific issue I will update the ticket.

[Viktor Tachev]

Hi Danielle,

Thank you for reaching out to us.

Positioning the validation tooltip above the row can introduce other challenges that would need to be handled. For example, the header of the Grid can hide the tooltip:

 

Because of this, I suggest an alternative approach - show the tooltip below the dropdown popup. For this, you can use the following CSS:

div.k-tooltip-error {
    z-index: 10000;
}

The result will look similar to this:

 

Let me know how the suggested approach works for you.

 

Regards,
Viktor Tachev
Progress Telerik