The validation message in the last row of each page is not displayed.

20 posts, 2 answers
  1. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 14 Jul 2014 Link to this post

    Hi Kendo Team,
    The validation message corresponding to an error in the last row of the bottom of the grid is not shown.
    You can get this effect in your custom validator editing grid sample.
    Clear the productName of the last row in the first page and you will not see the required validation message.
    The grid should scroll up automatically to show the validation message.
    Do you have any workarround?

    Kind regards,
    Oscar


  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 16 Jul 2014 Link to this post

    Hello Oscar,

    I am afraid that this is not currently supported. It should be possible to scroll the content to the bottom by using the Validator validate event or if the message should be immediately shown, the focusout event for the invalid inputs. I created a small example that demonstrates the second approach.


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 16 Jul 2014 in reply to Daniel Link to this post

    Hello Daniel,
    Thank you very much for your help.
    Why does not your example work for Unit Price column? This column is required. If you clear this cell on last row, the validation message doesn't come into view.

    Kind regards,
    Oscar
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 18 Jul 2014 Link to this post

    Hello again Oscar,

    Sorry, I missed this problem when using focusout. It should no longer occur with the latest official release(2014.2.716). With the service pack I can suggest to use the change event instead.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 18 Jul 2014 in reply to Daniel Link to this post

    Hello Daniel,
    One more. If you clear the Price of the product Tofu (this isn't the last row of the page, but the last row in sight), the validation message doesn't come into view.
    example

    Kind regards,
    Oscar
  7. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 18 Jul 2014 Link to this post

    Hi Oscar,

    If the grid content should be scrolled in this case as well, then you should check whether the message would be visible in the scroll container for each invalid element. I updated the example to demonstrate one possible implementation.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 21 Jul 2014 Link to this post

    Thank you very much, Daniel. It works like a charm.

    Kind regards,
    Oscar.
  9. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 15 Sep 2014 Link to this post

    Hello Daniel,
    I think this is my last scenario.
    How can I come into view the validation message for a locked column. I've updated your example . Clear the ProductName of the product Genen Shouyu to check the required validation message is not coming into view. 

    Kind regards,
    Oscar
  10. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 17 Sep 2014 Link to this post

    Hi Oscar,

    When there are locked columns the grid will use two tables so the handler bound to the content table will not be triggered on  focusout for an input in the locked content table. You can bind the event to the grid element in order to avoid this. Also, in this scenario you should either include the scrollbar height in the calculation or get the height from the locked content e.g.
    $(function () {
        var grid = $("#grid").data("kendoGrid");
        grid.element.on("focusout", ".k-invalid", function () {
            var content = grid.content;
            var height = grid.lockedContent.height();
            var cell = $(this).closest("td");
            var message = cell.find(".k-invalid-msg");
            var callout = message.find(".k-callout");
            var position = message.position();
            var top = position.top + callout.outerHeight() + message.outerHeight();
            if (top > height) {
                content.scrollTop(content.scrollTop() + top - height);
            }
        });                   
    });


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 19 Sep 2014 in reply to Daniel Link to this post

    Hello Daniel,

    I've updated this example following your instructions but it's not working as I expected.
    1) If you clear the ProductName cell of the last row of the page(p.e.Sir Rodney's Marmalade productName), the validation message is not in sight. You get the same effect if you clear Unit Price of the same row.
    2) The validation message for the locked Column is cut. The limit is the lockedContent's width.

    Any help would be appreciated.
    Kind regards
    Oscar.
  12. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 23 Sep 2014 Link to this post

    Hello Oscar,

    It seems that the grid will automatically scroll back the locked content since the position exceeds the scroll height of the content. I am afraid that I cannot suggest any approach to avoid this. Even if the locked content is also scrolled the grid will set again the old position.

    As for the message being cut - you can show the entire message by overriding the white-space style:
    .k-grid .k-edit-cell .k-tooltip {
        white-space: normal;
    }
    The style is already changed in the latest versions.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 25 Sep 2014 in reply to Daniel Link to this post

    Hello Daniel,
    Wouldn't it be possible to show the tool tip validation message above the invalid cell  instead of underneath for the last row, so as not having to scroll up the grid content?
  14. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 29 Sep 2014 Link to this post

    Hi,

    Yes, this would is possible by using the validator validate event e.g.
    var grid = $("#grid").data("kendoGrid");
    grid.bind("edit", function (e) {
        if (e.container.closest("tr").is(":last-child")) {
            e.container.data("kendoValidator").bind("validate", function (e) {
                if (!e.valid) {
                    var message = this.element.find(".k-invalid-msg");                                 
                    message.css("margin-top", -(message.outerHeight() + message.prev().outerHeight()) + "px");
                    message.find(".k-callout").hide();
                }
            });
        }
    });


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 02 Oct 2014 Link to this post

    Hello Daniel,
    I appreciate your help.
    This is a fully working sample. I hope this helps.
    I will have to update all my editable kendo grids in my application.
    Will you intend to incorporate this in next kendo releases?
  16. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 06 Oct 2014 Link to this post

    Hi,

    This is not currently planned. If you believe that this functionality should included then I can suggest to submit a new feature request in our user voice forum.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 06 Oct 2014 Link to this post

    Well, in my opinion this issue is a bug.It's not a new functionality. Developers wouldn't have to worry about a invalid row is the first or last one in a grid page so as kendoValidation shows the validation message in a right place so as the user can read the error message comfortably.
    If this is the way, yes, please, submit this in the user voice.
    Anyway, I'm very thankful for your help, Daniel.

    Kind regards,
    Oscar.
  18. Brian
    Brian avatar
    3 posts
    Member since:
    Oct 2015

    Posted 19 Nov 2015 Link to this post

    Agreed, this is a bug. I spent an hour in the CSS debugger looking for the validation message even though the elements were there. Finally I noticed that the one-row grid was now scrollable. Either the validation message needs to float outside the grid area, or the scroll area needs to automatically expand to accommodate the validation message. There's no way we can expect users to notice that the grid is now scrollable when it is so small to begin with.
  19. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 01 Nov in reply to Brian Link to this post

    Is there any reason why changing the CSS to

    .k-grid-content {
        position: static !important;
    }

    would pose a problem? This allows the tooltip to appear on top of the pagination.  I haven't seen any issues with it so far, although I am not using the grid scrollbar, but instead showing the entire set of rows returned on the page.

    Thanks!

  20. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 04 Nov Link to this post

    Hi Christy,

    If the Grid scrollable functionality is not required in your scenario, you can disable scrolling (scrollable: false), and if Grid's height is not explicitly set, this will yield the same results, without overwriting the default CSS:

    http://dojo.telerik.com/EheGi

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
  21. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 04 Nov in reply to Dimiter Topalov Link to this post

    That does keep the validation tooltip on top of the pagination and will probably work for most cases.  Unfortunately for me, the column needing validation allows up to 250 characters, which is much larger than expected.  When the grid is in edit mode, it shows the grid at the size intended.  However, on my test data (which has a row with an item with exactly 250 characters), the grid expands to allow all of the data to fit, so it goes off the page to the right.  It IS good to know that we can do this in other cases, though.
Back to Top
Kendo UI is VS 2017 Ready