Grid Selection - screen jumps/scrolls

[Ed]

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

[Ed]

option used is "selectable", not "selection".  An error when writing the post.  Issue still exists.

[Alexander Valchev]

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?

• http://screencast.com/t/ymuo85gO0odI

Regards,
Alexander Valchev
Telerik

 

 

[Ed]

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

[Vladimir Iliev]

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

 

 

[Ed]

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

[Ed]

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

[Alexander Valchev]

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

 

 

[Ed]

Hi Alexander,

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

Thanks,
--Ed

[Alexander Valchev]

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

 

 

[Evergage]

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.

[Alexander Valchev]

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

 

 

[Nariman]

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.

[Nariman]

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.

[Alexander Valchev]

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

 

 

[Sam]

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

Chrome latest.

 

[Alexander Valchev]

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

[David]

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.

[Georgi]

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:

• http://dojo.telerik.com/oSaWO

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

[daryn]

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?

[daryn]

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

[Georgi]

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:

• https://runner.telerik.io/fullscreen/@daryn/uCEHU

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

[daryn]

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

 

[daryn]

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

height: 645

 

 

[Georgi]

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:

• https://github.com/telerik/kendo-ui-core/issues/3511

Regards,
Georgi
Progress Telerik

[daryn]

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

[Georgi]

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

[Howard]

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.

[Preslav]

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

[Miroslaw]

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

[Preslav]

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

[Miroslaw]

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

[Preslav]

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

[Miroslaw]

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

[Preslav]

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

[Mike]

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.

[Preslav]

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