Grid Selection - screen jumps/scrolls

37 posts, 1 answers
  1. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 28 Jul 2014 Link to this post

    I have created the following Dojo (modified from the Demo of Grid > Selection)
    http://dojo.telerik.com/@esinek/IHaM

    When I load the Run the page and click a row, the entire grid "jumps" (probably a scrollTo somewhere) so the top of the first row in the grid is at the top of the browser.  This is very distracting and confusing.  Is there something in my configuration that is causing this or is it a bug - and if it's a bug, is there a workaround?

    If I change the "selection" option to "row" or remove the selection option, the jumping doesn't happen.

    Note that the "jump" only happens on the first selection.  Subsequent selections don't cause the grid to "jump".

    Thanks,
    --Ed
  2. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 28 Jul 2014 in reply to Ed Link to this post

    option used is "selectable", not "selection".  An error when writing the post.  Issue still exists.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 30 Jul 2014 Link to this post

    Hi Ed,

    Could you please specify on which browser you are testing with? I tried to reproduce the behaviour in Google Chrome and IE 11 but to no avail. Please check the screen cast and let me know if I am missing something?

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 04 Aug 2014 in reply to Alexander Valchev Link to this post

    Hi Alexander,
    Can you try again and make sure your browser window isn't quite so tall - so that the results view in the dojo forces a vertical scrollbar (apart from the scrollbar for the grid).  This way, there will be somewhere for the scrollTo to go.
    I hope that makes sense.
    Thanks,
    --Ed
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 07 Aug 2014 Link to this post

    Hi Ed,

    Basically older versions of IE triggers "scrollToView" action if you try to focus element which is not in current view port (this action cannot be prevented), however I already tried to reproduce this behavior (in IE7, IE8, IE11, Chrome) using the provided demo but to no avail - everything is working as expected. Could you please record small screencast (for example using jing) where the issue is demonstrated and provide more information about the exact browser version that you are using?

    Kind Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 09 Aug 2014 in reply to Vladimir Iliev Link to this post

    Hi Vladimir,

    I'm using the latest version of Chrome (Version 36.0.1985.125 m) on a Win7Enterprise (Version 6.1, Build 7601: SP1) machine.

    I tried to use jing, but am unable to do so since my work computer won't allow the connection to screencast.com.  I'll try from my home machine and post those details as well.

    Thanks,
    --Ed
  7. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 09 Aug 2014 in reply to Vladimir Iliev Link to this post

    Hi Vladimir,

    OK, so I was able to repro on my home machine: Chrome (Version 36.0.1985.125 m), Win8Pro (Version 6.3, build 9600)

    Here is the link to screencast.com: http://screencast.com/t/SPXxBtKWExq

    Thanks,
    --Ed
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 13 Aug 2014 Link to this post

    Hello Ed,

    Thank you for the screen cast.

    I forwarded the issue to the developer team for more information. The behavior that you experienced is caused because when row is selected on mousedown the Grid's table is focused. As a result the browser attempt to automatically scroll the focused table element into the view-able area and as a result the Grid "jumps".

    This browser behavior cannot be prevented and I am afraid that I cannot suggest a suitable workaround for that case. If the table element is not focused other Grid features may behave unexpectedly.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 13 Aug 2014 in reply to Alexander Valchev Link to this post

    Hi Alexander,

    Thanks for the explanation.  Can you explain why the "jumping" is not happening when I change the "selectable" option?

    Thanks,
    --Ed
  10. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 15 Aug 2014 Link to this post

    Hi Ed,

    The Grid selection feature uses the mouse down event and focuses the Grid's table. If the selection is turned off the behavior will be different.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Evergage
    Evergage avatar
    1 posts
    Member since:
    Mar 2014

    Posted 31 Mar 2016 Link to this post

    Alexander Valchev

    "This browser behavior cannot be prevented and I am afraid that I cannot suggest a suitable workaround for that case. If the table element is not focused other Grid features may behave unexpectedly."

     

    Actually that's not the end of the line here.  While the problem is that kendo is calling table.focus(), and that the browser will scroll the table into view during focus, you can "prevent" the scrolling by resetting the scrolling right after the focus call.  In fact, when I went to patch kendo to implement this in the source code, I was surprised to see that kendo actually had written code to do this already!  However, this code is only in 1 of the 2 focusTable() functions (why are there 2 functions?).

     

    I have a patch that we have made and are using here that I would like to suggest back to the code base.  Basically I just took the implementation from the 2nd focusTable() function and applied it to the first focusTable() function and it's working great!  Essentially what it does, is right before it goes to call table.focus(), it loops through the parent elements of the table and determines which of them are scrollable.  Then it stores off the y scroll value for each of those elements.  After the table.focus() gets called, it just re-applies those .scrollTop(y) values to each of the parent nodes.  Since this all gets run before the browser does a repaint, you don't even see the page scroll at all.

    How do I get a patch to you?  I'd like to open a new ticket to get this addressed, but I wanted to comment here as well.  We are currently using KendoUI 2014.3.1215.

  12. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 05 Apr 2016 Link to this post

    Hi Evergage,

    "calling table.focus(), and that the browser will scroll the table into view during focus, you can "prevent" the scrolling by resetting the scrolling right after the focus call"

    This is correct, the browser automatically scrolls into view the table if it is larger than the view port. The framework can track the original position and scroll to it after focus but there will be visual flicker.
    In addition, listening for the scroll event is likely to cause a performance issues. It is important to have in mind that the approach will not resolve all the issues - for example while the user tabs through the page elements the table will get focus without Kendo forcing the focus.

    I can suggest two options that you may try to resolve the issue in your project.

    1. To listen for the scroll event and manually re-position.
    2. You may turn off the build-in navigation (navigatable: false) and develop your own navigation.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Nariman
    Nariman avatar
    33 posts
    Member since:
    Aug 2013

    Posted 16 Jun 2016 Link to this post

    Dear Alex,

    I believe that your answer shouldn't be the end of story. This is your product and we're your customers and we're suffering from this very unpleasant behaviour in the UI. There're several DataGrid and Table UI objects out there and none-of-them have this problem! I've personally tested at least 2 of these alternatives. I don't name them here because I don't want you to think I'm backing or marketing any other products here! But I think you should know and test them with the same browsers yourself.

    While we appreciate Telerik for the wonderful job creating and developing Kendo UI, I don't think you should go back to your developers and find out the best way to fix this bug which you call it browser problem but it's Kendo Grid problem now and you should find a way to fix it the best way that you can!

    Thank you.

  14. Nariman
    Nariman avatar
    33 posts
    Member since:
    Aug 2013

    Posted 16 Jun 2016 Link to this post

    Dear Alex,

    To adds-on to my earlier post. Our problem (although similar as the rest) is happening when we are using in-line editing in the Grid. As soon as any of the cell is selected for editing by mouse-click the while grid jumps to the top of the browser window! It's so annoying behaviour. Please help to find away to fix it.

    Thank you.

  15. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 20 Jun 2016 Link to this post

    Hello Nariman,

    I understand your point but the problem is that eventual fix will cause more harm than good.
    If we develop a fix that listens for the scroll event and manually re-positions the scroller we will introduce a performance hit that will affect all users. The current keyboard navigation implementation does not allow an "easy fix" for this issue.

    I suggest to open a feature request at Kendo UI Feedback portal. In this way the other users will be able to evaluate the suggestion and vote for it. If it becomes popular we will consider it for one of our future releases.

    Regards,
    Alexander Valchev
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  16. Sam
    Sam avatar
    34 posts
    Member since:
    Dec 2016

    Posted 24 Jan 2017 in reply to Alexander Valchev Link to this post

    I have a jumping / scrolling issue, simply when scrolling down in my grid i get the following results, 

    Chrome latest.

     

  17. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 26 Jan 2017 Link to this post

    Hello Blowsie,

    Could you please provide a small Kendo Dojo example that demonstrates your scenario so I can take a look and assist you further?

    Regards,
    Alexander Valchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  18. David
    David avatar
    5 posts
    Member since:
    Dec 2015

    Posted 27 Jul 2017 Link to this post

    Is there any fix for this issue?  I too am experiencing this.  Whenever my grid is scrolled down to the bottom, if I select any cell, the grid automatically scrolls back to the top.  This is very annoying, especially if you have to select multiple rows at a time.
  19. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 31 Jul 2017 Link to this post

    Hi David,

    I created a test page, based on the provided description and it seems to work as expected on my side when I scroll to the bottom and then select any cell:

    In order to continue my investigation, could you please modify the above sample in order to recreate the observed behavior and send it back to us. This will help us fully understand the case and provide assistance to the best of our knowledge.

    I look forward to your reply.


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  20. daryn
    daryn avatar
    6 posts
    Member since:
    Aug 2017

    Posted 15 Aug 2017 in reply to Georgi Link to this post

    Hi,

    I am getting the same error. I have managed to reproduce it here: http://dojo.telerik.com/@daryn/uCEHU

    I increased the size of the grid and enabled the following options on the grid:

               navigatable: true,
               editable: true,

    To see the grid "jump" click on any cell and then press "tab".

    Are you able to see the issue?

  21. daryn
    daryn avatar
    6 posts
    Member since:
    Aug 2017

    Posted 15 Aug 2017 in reply to daryn Link to this post

    Using this: http://dojo.telerik.com/@daryn/uCEHU

    I can see the issue on Google Chrome - Version 60.0.3112.90 (Official Build) (64-bit)

    But it is not "jumping" on Microsoft Edge 40.15063.0.0

  22. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 17 Aug 2017 Link to this post

    Hi Daryn,

    Did you experience the same behavior in real scenario? Since the dojo is testing environment, the window is actually an iframe and the behavior is not observed when the same sample is opened in full screen:


    Could you please modify it in order to reproduce the issue in full screen? Or send me the actual project where the issue occurs, so I can investigate it locally.


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  23. daryn
    daryn avatar
    6 posts
    Member since:
    Aug 2017

    Posted 17 Aug 2017 in reply to Georgi Link to this post

    Hi,

    I can reproduce the error on the same link that you provided: https://runner.telerik.io/fullscreen/@daryn/uCEHU

    See attached video.

    This is on Google Chrome Version 60.0.3112.101 (Official Build) (64-bit)

    Windows 10 Pro

     

    I click in a cell, it goes into edit mode, as soon as I click 'tab' the window jumps up.

    I believe this is either the same issue, or very similar, as raised by others.

    Thanks, Daryn

     

  24. daryn
    daryn avatar
    6 posts
    Member since:
    Aug 2017

    Posted 17 Aug 2017 in reply to daryn Link to this post

    I believe this is related to the height. I start seeing the jumping at anything higher than a height of 645.

    height: 645

     

     

  25. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 21 Aug 2017 Link to this post

    Hi Daryn,

    I have logged scrolling in Chrome when grid is focused issue in our Github repository. You can track the status of the issue in the following link:



    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  26. daryn
    daryn avatar
    6 posts
    Member since:
    Aug 2017

    Posted 21 Aug 2017 in reply to Georgi Link to this post

    Hi,

    Thanks for accepting this as an issue. 

    Could you please clarify why it has been moved to GitHub? 

    What is the difference of it being here or there? Is it being left up to the community to be fixed?

    Why don't you encourage issues to be raised on GitHub in the first place? Look at all the history in this thread that has been lost. 

     

    Thanks, Daryn

  27. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 22 Aug 2017 Link to this post

    Hello Daryn,

    We use Github as task management tool. It facilitates tracking the submitted issues. We fix all issues in order of priority.

    You can monitor the status of the issue in the GitHub repository. It will be closed when a fix is introduced.


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  28. Howard
    Howard avatar
    3 posts
    Member since:
    Jul 2013

    Posted 24 Dec 2018 Link to this post

    Hi,

    We are using Kendo UI v2016.3.1118.

    Kendo scheduler jumps down to the page when user first time clicks on the scheduler. This behavior is the same for all the browser(IE, Chrome). 

    Please suggest.

  29. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 25 Dec 2018 Link to this post

    Hello Howard,

    I tested the scenario with the outlined version, and unfortunately, I was not able to replicate the described issue.

    Having said that, it will be very helpful if you can share a sample page that demonstrates this faulty behavior.

    Also, this is the forum of the Kendo UI Grid, thus, could you please post the above information in the Scheduler forum or open a support ticket on the same topic? This will help us better track the problems and their solutions.


    Regards,
    Preslav
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  30. Miroslaw
    Miroslaw avatar
    3 posts
    Member since:
    Feb 2020

    Posted 10 Apr 2020 Link to this post

    Hi,

    Situation still occurs on Kendo UI v2020.1.219 on IE browser in my case.

    Below is a basing configuration (C# code) for the grid for which situation happens:

    .Scrollable()
    //.Selectable()
    .Sortable()
    .Navigatable()
    .Editable(false)

    The main reason why it occurs is using kendo navigation (.Navigatable(true)).

    I would like to ask is there any workaround to fix it for the IE browser?

    Regards,

    Miroslaw

Back to Top