Grid popup: How to display validation errors inline (rather than as hint bubble)

2 posts, 0 answers
  1. James
    James avatar
    1 posts
    Member since:
    Oct 2020

    Posted 01 Dec 2020 Link to this post

    In a grid with GridEditMode.Popup, validation errors for fields in the pop-up window appear as a hint bubble by default.

    Is it possible to change the style of the validation so that errors in the pop-up window appear below the input fields (as they might for a normal html form)?

    See images for example.

     

    Thanks,

     

  2. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 04 Dec 2020 Link to this post

    Hi James,

    Thank you for the provided images.

    In order to change the stylings of the validation tooltip, I would recommend using CSS rules. Here is an example:

    <style>
      .k-validator-tooltip{
        background-color: transparent;
            margin-top: 0px;
      }
      .k-tooltip-content{
        color: red;
      }
      .k-edit-field{
        margin-bottom: 23px;
      }
      .k-callout{
        display: none;
      }
    </style>

    The complete implementation could be found in the following dojo example:

    Give the approach above a try and let me know if further assistance is needed.


    Kind Regards,
    Anton Mironov
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top