Validation message not shown for last row in grid

[Christy]

I know this issue has been brought up a number of times, and the generally accepted method of dealing with it is to add some code that causes the grid content height to be increased and the grid to scroll up.  My situation is slightly different because we do not use the scrollbar, but instead, have the grid take up as much room as needed. The user then uses the browser's scrollbar to reach the bottom of the grid.  We do, however, include pagination at the bottom.

So, I have tried using the approach where the sizing is changed as recommended.  This gives me the height I need.  There are two issues that have come up, though.  

The first is that I am unsure when to add the focusout event handler.  If I add it as part of the dataBinding or dataBound events on the grid, then I end up with this event being called multiple times if the user decides to resort the data in the grid, etc. If I add it during the $onInit method in my component (I'm using Angular), then it throws an error because there is no data in the grid. Where do you recommend adding this handler?

The second is that once an error has occurred, the additional space is now part of the grid.  Do I really need to call another event handler to remove this space on the cancel or update events?

Here is the method I am using. It would help if I could find a way to streamline this, too, so that it only ran on the last row.

function allowValidationShow() {
    var grid = $('#grid').data("kendoGrid");
    grid.table.on('focusout', '.k-invalid', adjustGridHeight);
}

function adjustGridHeight() {
    var content = $('#grid').find('.k-grid-content');
    var height = content.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.height(top);
    }
}

This would be a lot easier to use if there were only a way to ensure that the validation tooltip could be ABOVE the pagination.  Then, no additional code would be needed.

Thanks for your help!

[Stefan]

Hello Christy,

In the mentioned forum thread the last example is demonstrating that the event handler has to be added after the Grid is initialized and not on a specific event of the Grid because as you noticed it will be executed multiple times:

http://dojo.telerik.com/UmIl/6

As for the error and the additional space, the example is demonstrating how to select last two rows and show the validation tooltip at the top without adding any empty space at the bottom which has to be cleared later on.

If the application is not working as expected after implementing this, please send a runnable example reproducing the tooltip issue, so we can provide a suggestion best suited for it.

Regards,
Stefan
Telerik by Progress