This is a migrated thread and some comments may be shown as answers.

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

19 Answers 779 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Oscar
Top achievements
Rank 1
Oscar asked on 14 Jul 2014, 08:49 AM
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


19 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 16 Jul 2014, 07:35 AM
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!
 
0
Oscar
Top achievements
Rank 1
answered on 16 Jul 2014, 08:01 AM
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
0
Daniel
Telerik team
answered on 18 Jul 2014, 07:35 AM
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!
 
0
Oscar
Top achievements
Rank 1
answered on 18 Jul 2014, 08:35 AM
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
0
Accepted
Daniel
Telerik team
answered on 18 Jul 2014, 03:46 PM
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!
 
0
Oscar
Top achievements
Rank 1
answered on 21 Jul 2014, 07:17 AM
Thank you very much, Daniel. It works like a charm.

Kind regards,
Oscar.
0
Oscar
Top achievements
Rank 1
answered on 15 Sep 2014, 03:21 PM
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
0
Daniel
Telerik team
answered on 17 Sep 2014, 11:47 AM
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!
 
0
Oscar
Top achievements
Rank 1
answered on 19 Sep 2014, 11:35 AM
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.
0
Daniel
Telerik team
answered on 23 Sep 2014, 12:09 PM
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!
 
0
Oscar
Top achievements
Rank 1
answered on 25 Sep 2014, 07:46 AM
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?
0
Accepted
Daniel
Telerik team
answered on 29 Sep 2014, 08:30 AM
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!
 
0
Oscar
Top achievements
Rank 1
answered on 02 Oct 2014, 09:00 AM
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?
0
Daniel
Telerik team
answered on 06 Oct 2014, 07:47 AM
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!
 
0
Oscar
Top achievements
Rank 1
answered on 06 Oct 2014, 08:15 AM
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.
0
Brian
Top achievements
Rank 1
answered on 19 Nov 2015, 05:02 PM
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.
0
Christy
Top achievements
Rank 1
answered on 01 Nov 2016, 03:22 PM

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!

0
Dimiter Topalov
Telerik team
answered on 04 Nov 2016, 06:29 AM
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.
0
Christy
Top achievements
Rank 1
answered on 04 Nov 2016, 01:44 PM
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.
Tags
Grid
Asked by
Oscar
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Oscar
Top achievements
Rank 1
Brian
Top achievements
Rank 1
Christy
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or