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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





121753 Jan 21,2016 04:04 PM UTC Feb 4,2016 09:57 AM UTC JavaScript 5
Tags: ejGrid
Greg Gannicott
Asked On January 21, 2016 04:04 PM UTC

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

Sellappandi Ramu [Syncfusion]
Replied On 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: http://jsplayground.syncfusion.com/mulgvsjv

Refer to the online help documentation for scrollOneStepBy property,

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

Sellappandi R

Greg Gannicott
Replied On January 25, 2016 09:24 AM UTC

Thanks for the helpful response.

We'll try this shortly.


Balaji Marimuthu [Syncfusion]
Replied On 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

Greg Gannicott
Replied On 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.

Ragavee U S [Syncfusion]
Replied On 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.


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon