We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Using up/down keyboard shortcut to navigate up and down a row causes viewport to scroll

When using the up/down keys to navigate the rows on the grid, the view port of the grid also changes. 

The keys are causing it to scroll as they normally would in a browser.

In this instance though it causes it to be disorientating for the user. If you look at the attached animated gif, it doesn't even feel as though the row has changed (although it has).

The default behaviour of scrolling should be suppressed/prevented.

Also the currently selected row should always be visible once the user has pressed the cursor key. It shouldn't be off screen once they've pressed the key.

Can you look into this please?

Many thanks.

Attachment: viewportmovement2_7b9e01ed.zip

5 Replies

SR Sellappandi Ramu Syncfusion Team January 22, 2016 08:51 AM UTC

Hi Greg,

Thanks for contacting Syncfusion support.

We have option to change scroller step value using `scrollOneStepBy` property in `scrollSettings`. After modifying default value of `scrollOneStepBy` it will minimize navigation range of scroller. So we suggest youto set the Grid row height value to `scrollOneStepBy` to make selected row in visible screen while key navigation. Default value of `scrollOneStepBy` property is 57, so we suggest you to use 33 which is grid row height.

Please refer to the code example and playground sample,

$(function () {

            // the datasource "window.gridData" is referred from jsondata.min.js

            var data = window.gridData;


                dataSource: data,

                allowScrolling: true,

                scrollSettings:{width: "100%", height: 300, scrollOneStepBy: 33},

                allowPaging: true,


                columns: [

                            . . . .



Sample Link: https://jsplayground.syncfusion.com/mulgvsjv

Refer to the online help documentation for scrollOneStepBy property,

Document: https://help.syncfusion.com/js/scroller/customizing-the-scroll-step

Sellappandi R

GG Greg Gannicott January 25, 2016 09:24 AM UTC

Thanks for the helpful response.

We'll try this shortly.


BM Balaji Marimuthu Syncfusion Team January 26, 2016 05:56 AM UTC

Hi Greg,

Thanks for the update.

Please give a try and get back if you need any further assistance.
Balaji Marimuthu

GG Greg Gannicott February 3, 2016 10:47 AM UTC


I've attempted to implement this fix using AngularJS. I've added the following attribute to the element containing the ej-grid directive:


But it isn't taking effect.

If I use the following code (which I'm not able to put into production) it works as intended:

$(function () {
        scrollSettings:{scrollOneStepBy: 33}

Can you confirm for me whether it's meant to work using the Angular implementation please? Is it something I'm doing it wrong?

Many thanks.

RU Ragavee U S Syncfusion Team February 4, 2016 09:57 AM UTC

Hi Greg,

We considered this query “scrollSettings.scrollOneStepBy property not working when defining in angularjs” as a bug. We have logged a report on this and will fix the issue internally, also the fix will be included in 2015 Volume 4  Service Pack 2 release which has been scheduled to be roll out in the month of March 2016.

We have also created an incident internally to have a follow up with this issue.
Ragavee U S.

Live Chat Icon For mobile
Up arrow icon