This is a migrated thread and some comments may be shown as answers.
Grid Selection - screen jumps/scrolls
36 Answers 230 Views
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 28 Jul 2014, 06:19 PM
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

36 Answers, 1 is accepted

Sort by
0
Ed
Top achievements
Rank 1
answered on 28 Jul 2014, 06:21 PM
option used is "selectable", not "selection".  An error when writing the post.  Issue still exists.
0
Alexander Valchev
Telerik team
answered on 30 Jul 2014, 04:11 PM
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!
 
0
Ed
Top achievements
Rank 1
answered on 05 Aug 2014, 02:20 AM
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
0
Vladimir Iliev
Telerik team
answered on 07 Aug 2014, 06:32 AM
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!
 
0
Ed
Top achievements
Rank 1
answered on 10 Aug 2014, 12:46 AM
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
0
Ed
Top achievements
Rank 1
answered on 10 Aug 2014, 12:55 AM
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
0
Alexander Valchev
Telerik team
answered on 13 Aug 2014, 07:26 AM
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!
 
0
Ed
Top achievements
Rank 1
answered on 13 Aug 2014, 02:36 PM
Hi Alexander,

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

Thanks,
--Ed
0
Accepted
Alexander Valchev
Telerik team
answered on 15 Aug 2014, 10:32 AM
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!
 
0
Evergage
Top achievements
Rank 1
answered on 31 Mar 2016, 07:52 PM

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.

0
Alexander Valchev
Telerik team
answered on 05 Apr 2016, 07:43 AM
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!
 
0
Nariman
Top achievements
Rank 1
answered on 16 Jun 2016, 04:47 PM

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.

0
Nariman
Top achievements
Rank 1
answered on 16 Jun 2016, 05:07 PM

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.

0
Alexander Valchev
Telerik team
answered on 20 Jun 2016, 12:08 PM
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.
 
0
Sam
Top achievements
Rank 2
answered on 24 Jan 2017, 08:36 AM

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

Chrome latest.

 

0
Alexander Valchev
Telerik team
answered on 26 Jan 2017, 09:16 AM
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.
0
David
Top achievements
Rank 1
answered on 27 Jul 2017, 07:59 PM
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.
0
Georgi
Telerik team
answered on 31 Jul 2017, 03:41 PM
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.
0
daryn
Top achievements
Rank 1
answered on 15 Aug 2017, 12:14 PM

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?

0
daryn
Top achievements
Rank 1
answered on 15 Aug 2017, 12:19 PM

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

0
Georgi
Telerik team
answered on 17 Aug 2017, 10:57 AM
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.
0
daryn
Top achievements
Rank 1
answered on 17 Aug 2017, 12:22 PM

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

 

0
daryn
Top achievements
Rank 1
answered on 17 Aug 2017, 12:37 PM

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

height: 645

 

 

0
Georgi
Telerik team
answered on 21 Aug 2017, 09:21 AM
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.
0
daryn
Top achievements
Rank 1
answered on 21 Aug 2017, 09:55 AM

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

0
Georgi
Telerik team
answered on 22 Aug 2017, 02:34 PM
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.
0
Howard
Top achievements
Rank 1
answered on 24 Dec 2018, 07:13 AM

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.

0
Preslav
Telerik team
answered on 25 Dec 2018, 08:47 AM
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.
0
Miroslaw
Top achievements
Rank 1
answered on 10 Apr 2020, 09:11 AM

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

0
Preslav
Telerik team
answered on 13 Apr 2020, 03:25 PM

Hello Miroslaw,

Based on the provided description, I am not sure what is causing this issue. Could you please elaborate on the following:

1) Are you using ASP.NET MVC or ASP.NET Core?
2) Could you please send me a short video of the faulty behavior?

Also, it will help me a lot to provide assistance to the best of my knowledge if you can attach a sample project that clearly replicates the problem.

I look forward to hearing from you.

 

Regards,
Preslav
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Miroslaw
Top achievements
Rank 1
answered on 14 Apr 2020, 07:49 AM

Hello Preslav,

 

1) I am using ASP.NET Core 3.1.

2) I have attached short video with the issue.

3) The situation occurs on Internet Explorer v11.719. (Chrome, Edge work correctly)

 

Best Regards,

Miroslaw

0
Preslav
Telerik team
answered on 16 Apr 2020, 07:31 AM

Hi Miroslaw,

Thank you for sending the additional information. Now, I able to better understand the issue.

Unfortunately, I am not able to replicate it. I am attaching my test project to this post. My local IE is 11.1039. Could you please check the project and let me know if there are any configuration differences with your app? 

 

Regards,
Preslav
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Miroslaw
Top achievements
Rank 1
answered on 16 Apr 2020, 12:13 PM
Hi Preslav,

Thank you for the example project.

It allowed me to find the issue.

And it turned out it is related to my JQuery script which unfortunately does not work on IE.

Script removes doubled focusing on grid cell by selecting input text only without navigation cell focusing.

I have attached a short movie what I mean.

Thank you again for helping. It was the most tricky issue I could not fix by myself :)


Best Regards,
Miroslaw
0
Preslav
Telerik team
answered on 17 Apr 2020, 03:34 PM

Hi Miroslaw,

Thank you for sharing the cause of the problem with me. I am glad to hear that the issue is now resolved.

 

Regards,
Preslav
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Mike
Top achievements
Rank 1
answered on 03 Dec 2020, 04:03 AM
I worked out today that the jump happens in the latest version of Chrome - but - not the latest version of Firefox. It behaves itself in Firefox.
0
Preslav
Telerik team
answered on 04 Dec 2020, 02:08 PM

Hello Mike,

Could you please elaborate on the scenario that you are experiencing? A sample page that demonstrates the problem will help me a lot in providing assistance to the best of my knowledge.

I look forward to your reply.

 

Regards,
Preslav
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/.

Tags
Grid
Asked by
Ed
Top achievements
Rank 1
Answers by
Ed
Top achievements
Rank 1
Alexander Valchev
Telerik team
Vladimir Iliev
Telerik team
Evergage
Top achievements
Rank 1
Nariman
Top achievements
Rank 1
Sam
Top achievements
Rank 2
David
Top achievements
Rank 1
Georgi
Telerik team
daryn
Top achievements
Rank 1
Howard
Top achievements
Rank 1
Preslav
Telerik team
Miroslaw
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Share this question
or