Possible Bug: Validation shows up in the wrong column when I have a command column...

[Jason]

Symptom
the validation bubbles for my grid show up on the wrong column if I use a commands column

When I try to add a row, the <Required()> validations are executed from the client as expected, but the validation bubble's arrow is pointing to the wrong column.  If I put the command column before the bound columns, the validation message appears one column too far to the right.  If I put the command column after the bound columns, the validation message appears one column too far to the left. 


Model
I've decorated my model with validation attributes, eg....

Public Class AppraiserMetaData
    Public Property AppraiserId As System.Guid

    <Required()>
    Public Property sAMAccountName As String

    <Required()>
    Public Property AppraiserSpecialtyName As String

    <Required()>
    <StringLength(2)>
    Public Property AppraiserTypeAbbrev As String

    <Required()>
    Public Property EmployeeTypeName As String

    <Required()>
    Public Property StateAbbrev As String

    <Required()>
    Public Property CountyName As String
End Class




View
    @Code
        Html.Kendo().Grid(Of InternalAppraisal.Entities.Appraiser)() _
        .Name("AppraiserGrid") _
        .Columns(
            Sub(c)
                    c.Command(Function(cmds)
                                      cmds.Edit()
                                      cmds.Destroy()
                                      Return cmds
                              End Function)
                    c.Bound(Function(p) p.FirstName).Title("First")
                    c.Bound(Function(p) p.LastName).Title("Last")
                    c.Bound(Function(p) p.AppraiserSpecialtyName).Title("Specialty")
                    c.Bound(Function(p) p.AppraiserTypeAbbrev).Title("Appraiser Type")
                    c.Bound(Function(p) p.CountyName).Title("County")
                    c.Bound(Function(p) p.EmployeeTypeName).Title("Type")
                    c.Bound(Function(p) p.sAMAccountName).Title("sAMAccountName")
                    c.Bound(Function(p) p.StateAbbrev).Title("State")
            End Sub) _
        .DataSource(
            Function(d)
                    Return d _
                        .Ajax() _
                        .Model(Function(model)
                                       model.Id(Function(aprsr As InternalAppraisal.Entities.Appraiser) aprsr.AppraiserId)
                                       model.Field(Function(aprsr) aprsr.AppraiserId).Editable(False).DefaultValue(Guid.NewGuid())
                                       model.Field(Of String)("FirstName").Editable(False)
                                       model.Field(Of String)("LastName").Editable(False)
                                       Return (model)
                               End Function) _
                        .Create(Function(c) c.Action("Appraiser_Create", "Appraiser")) _
                        .Read(Function(r) r.Action("Appraisers_Read", "Appraiser")) _
                        .Update(Function(u) u.Action("Appraiser_Update", "Appraiser")) _
                        .Destroy(Function(de) de.Action("Appraiser_Delete", "Appraiser")) _
                        .Events(
                            Function(events)
                                    Return events.Error("error_handler")
                            End Function)
            End Function) _
        .ToolBar(Function(t) t.Create()) _
        .Sortable() _
        .Scrollable() _
        .Filterable() _
        .Render()
    End Code

Is this a bug in one of telerik's libraries, or did I fail to overload something?

In the event that this is a bug in one of telerik's libraries, what is the recommended technique for suppressing the validation bubble, and instead, displaying the validation messages in an area similar to a validation summary?

Thanks,

Jason

[Jason]

I've been able to mask the symptom with the following CSS, but I don't know if that's the best way to go about the solution:

.k-callout-n { left: 0px; }

I think the issue is that in the CSS provided from the CDN, k-callout-n by default applies an arbitrary value, and in my situation, that arbitrary value is outside the width of the column.

I don't think it actually has anything to do with the Commands column, as I initially suspected.

[Alexander Popov]

Hi Jason,

This could happen in case the column's width is less than the width of the validation error message. Basically, there are two approaches that I could recommend:

• Use CSS to re-position the tooltips (example)
• Use JavaScript and the Validator's validate event handler to re-position the tooltips (example)

Regards,
Alexander Popov
Telerik