Grid popup: How to display validation errors inline (rather than as hint bubble)

[James]

In a grid with GridEditMode.Popup, validation errors for fields in the pop-up window appear as a hint bubble by default.

Is it possible to change the style of the validation so that errors in the pop-up window appear below the input fields (as they might for a normal html form)?

See images for example.

 

Thanks,

 

[Anton Mironov]

Hi James,

Thank you for the provided images.

In order to change the stylings of the validation tooltip, I would recommend using CSS rules. Here is an example:

<style>
  .k-validator-tooltip{
    background-color: transparent;
        margin-top: 0px;
  }
  .k-tooltip-content{
    color: red;
  }
  .k-edit-field{
    margin-bottom: 23px;
  }
  .k-callout{
    display: none;
  }
</style>

The complete implementation could be found in the following dojo example:

• https://dojo.telerik.com/afIfuqaK

Give the approach above a try and let me know if further assistance is needed.


Kind Regards,
Anton Mironov
Progress Telerik