[Solved] Grid Validation Message

[shiva]

Hello,
I'm using telerik Grid for my screens and I'm using Data Annotations with validation message. While displaying validation message it is not displaying right next or below textbox. it is showing far below textbox and is overlapping with grid row down below and user can't read it properly. Any thoughts on why is this happening and how can I control that behavior.

Thanks,
Shiva

[Jason]

Did you get a solution to this? I have the exact same situation; I need to customize the display of validation error messages inside of narrow grid columns.

[shiva]

Sorry Jason, I didn't got any solution for this.

[Neena]

Hi Shiva,

I am having the same problem as yours. The validation message is displayed somewhere to the right most corner of the control which is similar to the Demo for the ajax binding. But there in the demo, it has this dark black background with the Text colored in Red.

Please post if your were able to find a solution for that.

Thanks,
Neena

[Emmanuel]

To customize your validation error message you need to overwrite css styles.

That is how Telerik get the black validation background in their demo
ex:

<style type="text/css">
    .field-validation-error
    {
        position: absolute;
        display: block;
    }
    
    * html .field-validation-error { position: relative; }
    *+html .field-validation-error { position: relative; }
    
    .field-validation-error span
    {
        position: absolute;
        white-space: nowrap;
        color: red;
        padding: 17px 5px 3px;
        background: transparent url('<%=
            Url.Content("~/Content/Common/validation-error-message.png") %>') no-repeat 0 0;
    }
    
    /* in-form editing */
    .t-edit-form-container
    {
        width: 350px;
        margin: 1em;
    }
    
    .t-edit-form-container .editor-label,
    .t-edit-form-container .editor-field
    {
        padding-bottom: 1em;
        float: left;
    }
    
    .t-edit-form-container .editor-label
    {
        width: 30%;
        text-align: right;
        padding-right: 3%;
        clear: left;
    }
    
    .t-edit-form-container .editor-field
    {
        width: 60%;
    }
</style>