This is a migrated thread and some comments may be shown as answers.

Custom validation message shows up on the wrong column

4 Answers 87 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Yovav
Top achievements
Rank 1
Yovav asked on 21 Jan 2014, 11:21 PM
My custom validation message shows up on the wrong column (see attached image)

Any idea why? or how to fix it?

Thanks.

4 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 23 Jan 2014, 11:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Yovav
Top achievements
Rank 1
answered on 23 Jan 2014, 04:52 PM
Great!

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

Thanks.
0
Ben
Top achievements
Rank 1
answered on 18 Feb 2014, 06:14 PM
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.
0
Alexander Popov
Telerik team
answered on 20 Feb 2014, 12:05 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Yovav
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Yovav
Top achievements
Rank 1
Ben
Top achievements
Rank 1
Share this question
or