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

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

2 Answers 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 01 Oct 2014, 01:18 PM
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

2 Answers, 1 is accepted

Sort by
0
Jason
Top achievements
Rank 1
answered on 01 Oct 2014, 06:52 PM
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.
0
Alexander Popov
Telerik team
answered on 02 Oct 2014, 09:10 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Jason
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or