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

3 posts, 0 answers
  1. Jason
    Jason avatar
    6 posts
    Member since:
    Sep 2012

    Posted 01 Oct 2014 Link to this post

    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. Jason
    Jason avatar
    6 posts
    Member since:
    Sep 2012

    Posted 01 Oct 2014 in reply to Jason Link to this post

    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.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 02 Oct 2014 Link to this post

    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.

     
Back to Top