Selecting row in grid causes page to scroll

9 posts, 1 answers
  1. Travis
    Travis avatar
    25 posts
    Member since:
    Jan 2014

    Posted 08 Apr 2014 Link to this post

    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


  2. Answer
    Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 10 Apr 2014 Link to this post

    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!
     
  3. Travis
    Travis avatar
    25 posts
    Member since:
    Jan 2014

    Posted 10 Apr 2014 in reply to Dimo Link to this post

    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
  4. Geoff
    Geoff avatar
    1 posts
    Member since:
    Feb 2013

    Posted 28 Nov 2015 in reply to Travis Link to this post

    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?

  5. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 02 Dec 2015 Link to this post

    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!
  6. NerdBrick
    NerdBrick avatar
    38 posts
    Member since:
    Jan 2013

    Posted 06 Jan 2016 Link to this post

    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. 

     

  7. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 08 Jan 2016 Link to this post

    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!
  8. Gayatri
    Gayatri avatar
    1 posts
    Member since:
    Mar 2021

    Posted 05 Mar in reply to Travis Link to this post

    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
  9. Tsvetomir
    Admin
    Tsvetomir avatar
    843 posts

    Posted 09 Mar Link to this post

    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/.

Back to Top