Custom validation message shows up on the wrong column

[Yovav]

My custom validation message shows up on the wrong column (see attached image)

Any idea why? or how to fix it?

Thanks.

[Alexander Popov]

Hello Yovav,

This happens because the error message is wider than the column which failed to validate. Since the error message container uses absolute positioning it floats over the next column as well. You could either increase the column's width or override the positioning, as shown in this example.

Regards,
Alexander Popov
Telerik

[Yovav]

Great!

I solved it by adding left:570px; to that specific validationMessage id

Thanks.

[Ben]

The proposed solution is not acceptable. In the linked example, if you set the UnitPrice column width to 75px, the error message is not even readable. Yovav's solution is not applicable in my case, either; I cannot hard-code "left" values for every column in the entire application. This problem needs a solution from Telerik, not some kind of case-by-case hack.

[Alexander Popov]

Hello Ben,

Thank you for your feedback.
Implementing a fast and versatile solution that always positions the error message exactly where one would expect it is not as trivial as it might seem. We could adjust the position using JavaScript, but that could be a serious hit on performance in certain cases, that is why we prefer using the simplest possible implementation. Here is an example how one could manually re-position the validation message using JavaScript:

1. Subscribe to the Grid's edit event 
2. Once the event is triggered get the Validator's instance and attach a handler to the validate event 
3. Once the validate event is triggered use jQuery to customize the Tooltip's CSS properties

For convenience I prepared an example which illustrates the above approach, I hope it helps.

Regards,
Alexander Popov
Telerik