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

[Oscar]

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

[Daniel]

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

 

 

[Oscar]

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

[Daniel]

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

 

 

[Oscar]

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

[Daniel]

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

 

 

[Oscar]

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

Kind regards,
Oscar.

[Oscar]

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

[Daniel]

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

 

 

[Oscar]

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.

[Daniel]

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

 

 

[Oscar]

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?

[Daniel]

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

 

 

[Oscar]

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?

[Daniel]

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

 

 

[Oscar]

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.

[Brian]

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.

[Christy]

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!

[Dimiter Topalov]

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

[Christy]

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.