ValidationMessageFor ends up under the DropDown

4 posts, 0 answers
  1. Daniel
    Daniel avatar
    2 posts
    Member since:
    Oct 2013

    Posted 16 Oct 2013 Link to this post

    Hello,
    I'm trying to use an MVC-grid with a custom edit template. I think I got most of it working, but I have a strange problem. The validationmessages ends up in a weird position. The middle message ends up under the dropdown, even though the first one end up on top of another dropdown. Is there a possibility to control the z-level? I don't even set the ValidationMessageFor for the dropdowns, but I guess they are automatic since I have an OptionLabel on them. 

    @Html.HiddenFor(model => model.Id)
     
    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
     
    <div class="editor-label">
        @Html.LabelFor(model => model.OwnerId)
    </div>
    <div class="editor-field">
         
      @(Html.Kendo().DropDownList()
              .Name("OwnerId")
              .HtmlAttributes(new { style = "width: 250px" })
               .DataTextField("NamePlusDepartment")
              .DataValueField("Id")
              .OptionLabel("Välj en person")
              .DataValueField("Id")         
              .DataSource(source => {
                  source.Read(read =>
                  {
                      read.Action("GetPersonal", "List");
                  });
              })                  
        )
     
         
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.ResponsibleId)
    </div>
    <div class="editor-field">
         
      @(Html.Kendo().DropDownList()
              .Name("ResponsibleId")
              .HtmlAttributes(new { style = "width: 250px" })
               .DataTextField("NamePlusDepartment")
              .DataValueField("Id")
              .OptionLabel("Välj en person")
              .DataSource(source => {
                  source.Read(read =>
                  {
                      read.Action("GetPersonal", "List");
                  });
              })                   
        )
     
         
    </div>
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 17 Oct 2013 Link to this post

    Hi Daniel,

    You can customize the Kendo UI validator tooltip position, by using a span element added on the position where you want to display the message. The span is linked to the input being validated using its name attribute:

    http://docs.kendoui.com/getting-started/framework/validator/overview#customizing-the-tooltip-position
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Daniel
    Daniel avatar
    2 posts
    Member since:
    Oct 2013

    Posted 17 Oct 2013 Link to this post

    That worked! Thank you!

    Best regards,
    Daniel
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 17 Oct 2013 Link to this post

    Hi Daniel,

    I am glad it helped.

    If you need any further questions, please do not hesitate to contact us.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top