Selecting row in grid causes page to scroll

[Travis]

When I have a grid that extends below the visible area of the page, clicking on a row causes the page to scroll upward by some arbitrary amount. My attempt to prevent this in the grid change handler is not successful, because the scroll is instantaneous, and happens before the handler is called. I can scroll the page back down within the handler, but this causes a very noticeable 'jump' when a row is clicked. It appears this only happens in Chrome.

I have two questions:

1. why does the page scroll at all when a row is clicked?
2. how can i PREVENT the scrolling entirely, instead of re-scrolling the page back to the original position?

Here's most of the grid definition:

change: onChange,
sortable: {
mode: 'multiple'
},
groupable: true,
filterable: true,
navigatable: true,
resizable: true,
selectable: 'multiple row',

I've searched a bit, and found a few threads with something that sounds similar (http://www.telerik.com/forums/grid-jumps-or-scrolls-to-top-on-row-click), but the claim is that the issue was resolved with 2013.1.417

Can anyone shed some light on this? Many thanks

[Dimo]

Hello Travis,

The referenced forum thread is for a different Grid - the one in the ASP.NET AJAX suite.

Do you reproduce the described issue here?

http://jsfiddle.net/dimodi/zD9Xc/

Generally, it is possible to observe unexpected scrolling in old Internet Explorer versions, because focusing leads to "scroll into view". The issue occurs only when navigatable is true and the easiest workaround is to make the Grid scrollable and no higher than the usual page height, so that the widget can fit on a single screen. Option 2 that you have mentioned is unfortunately impossible to achieve.

Feel free to modify the above fiddle if your scenario is different.

Regards,
Dimo
Telerik

 

 

[Travis]

Thanks Dimo - you're correct, it only happens when navigatable is true, and is reproduced in the fiddle you linked. I guess the idea is that with keyboard navigation, Kendo tries to focus the selected row into view? If so, it still kind of seems like a bug, because in our case the row actually gets scrolled out of view. We haven't noticed this in IE, but we're only targeting IE9+; it's definitely happening in current release of Chrome.

Thanks again for the response!

Trav

[Geoff]

Hi I know this is an old post.. but.... i have this issue in the latest version.  I have my grid in an MVC Razor view and in Chrome as i tab along the columns the page scrolls so the Kendo Grid is at the top of the page.  In the new Edge browser this behavior doesn't happen but most of my users will be on chrome.

my grid looks a bit squashed if I make it fit on the screen, and the page still scrolls anyway (I have more content on my page bellow my grid so it has to be longer than 1 screen)

Any suggestions as to what could be done?

[Dimo]

Hi Geoff,

Do you reproduce the described problem in Google Chrome on this test page?

http://dojo.telerik.com/uwUno

If yes, please outline the required steps.

Regards,
Dimo
Telerik

[NerdBrick]

I'm able to make this page scroll jump occur with build Q3 2015 using your example from above http://dojo.telerik.com/uwUno; howevever, I changed the grid to be defined this way.  Scrollable, Multiple Selection, and Paging off. 

$("#grid").kendoGrid({
                        dataSource: dataSource,
                      scrollable: {
                            virtual: true
                        },
                      selectable: "multiple",
                        pageable: false,
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                            { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                            { field: "Discontinued", width: 120 },
                            { command: "destroy", title: " ", width: 150 }],
                        editable: true
                    });

Not sure how long this link is good for.  http://dojo.telerik.com/@NerdBrick/etoyu  

In Chrome and now Edge, the page will jump scroll up when you select a row. In IE 11 it doesn't do this. 

 

[Dimo]

Hello Brick,

Yes, you are right. Scrolling is triggered by the multiple selection feature. However, the behavior occurs due to a JavaScript code, which is required to disable the standard text selection in the Grid while dragging the mouse cursor to select multiple rows. The only way to avoid page scrolling in this case is to reduce the Grid height, so that it can fit in the visible part of the page more easily.

Regards,
Dimo
Telerik

[Gayatri]

I do have the same issue onRowClick  of detail grid event causes master grid scroll to top.Please let me know if you found the solution

[Tsvetomir]

Hi,

The issue with the page scrolling to the top should have been resolved with the newer versions. I have taken the example from the post above and updated it to the latest version and it appears that the scroll maintains its position. Could you confirm the same?

http://dojo.telerik.com/OtatiMiq

It would be helpful if you could modify the sample in order to replicate the issue and send it back to me.

 

Regards,
Tsvetomir
Progress Telerik

[Aldo]

Hi Tsvetomir,

I'm having the same issue with kendo UI for Angular. I'm seeing, as you mentioned, that the issue has been resolved on the JQuery version, is the issue resolved in the Angular version as well?

Thanks,

Aldo Martinez

[Nikolay]

Hi Aldo,

I will kindly ask you to submit a new thread choosing Kendo UI for Angular as a product. We have a ceparate dedicated team working on the suite for Angular and they will be able to answer your question. These Kendo UI suites are different products and we aim not to mix them in a single thread.

Regards,

Nikolay