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

[Greg Gannicott]

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]

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;

            $("#Grid").ejGrid({

                dataSource: data,

                allowScrolling: true,

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

                allowPaging: true,

                pageSettings:{pageSize:20},

                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

Regards,
Sellappandi R

[Greg Gannicott]

Thanks for the helpful response.

We'll try this shortly.

Thanks.

[Balaji Marimuthu]

Hi Greg,
 
Thanks for the update.

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

[Greg Gannicott]

Hi.

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

e-scrollsettings-scrollonestepby="33"

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 () {

    $("#integratorTemplateGrid").ejGrid({

        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]

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.
Regards,
Ragavee U S.