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

Selecting row in grid causes page to scroll

8 Answers 1161 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Travis
Top achievements
Rank 1
Travis asked on 08 Apr 2014, 06:51 PM
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


8 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 10 Apr 2014, 11:42 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Travis
Top achievements
Rank 1
answered on 10 Apr 2014, 04:04 PM
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
0
Geoff
Top achievements
Rank 1
answered on 28 Nov 2015, 10:53 AM

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?

0
Dimo
Telerik team
answered on 02 Dec 2015, 07:15 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
NerdBrick
Top achievements
Rank 1
answered on 06 Jan 2016, 10:00 PM

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. 

 

0
Dimo
Telerik team
answered on 08 Jan 2016, 03:48 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gayatri
Top achievements
Rank 1
answered on 05 Mar 2021, 08:39 AM
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
0
Tsvetomir
Telerik team
answered on 09 Mar 2021, 07:37 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Aldo
Top achievements
Rank 1
commented on 26 Aug 2021, 09:22 PM

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
Telerik team
commented on 30 Aug 2021, 08:44 AM

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

Tags
Grid
Asked by
Travis
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Travis
Top achievements
Rank 1
Geoff
Top achievements
Rank 1
NerdBrick
Top achievements
Rank 1
Gayatri
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or