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 pagination keyboard shortcuts (pg up/down) causes viewport to move

Thread ID:





121792 Jan 26,2016 10:50 AM UTC Jan 27,2016 10:56 AM UTC JavaScript 2
Tags: ejGrid
Greg Gannicott
Asked On January 26, 2016 10:50 AM UTC


Steps to Recreate

With a grid which has pagination, scrolls and has more than one page:
  1. Give the grid focus (eg. select the first row).
  2. Press Page Down in order to move on to Page 2.
  3. Notice that the View Port of the table goes down (eg. it scrolls down).
  4. Press Page Down in order to move on to Page 3.
  5. Once again the View Port changes.
Could this be looked at please?

Many thanks.

Greg Gannicott
Replied On January 26, 2016 10:54 AM UTC

I forgot to add to the original post an animated gif of the bug in action.

Please find it attached to this post.

Attachment: viewportmovement_1bfdccda.zip

Jayaprakash Kamaraj [Syncfusion]
Replied On January 27, 2016 10:56 AM UTC

Hi Greg,

We have achieved your requirement using create event.  Scroller also has the same keyConfigs for page Up/down. You need to reconfigure it for the pager shortcuts to work. Please refer to the below code example and sample.
Code Example:

  <script type="text/javascript">

        $(function () {


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

                dataSource: window.gridData,

                 scrollSettings: {  height: 200 },

                allowScrolling: true,



                columns: [

                              { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 },

                              { field: "CustomerID", headerText: "Customer ID", width: 90 },

                              { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 80 },

                              { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}" },

                              { field: "ShipCity", headerText: "Ship City", width: 110 },

                              { field: "ShipCountry", headerText: "Ship Country", width: 110 }




              function create(args){

              var scrollInstance = this.getScrollObject();

              scrollInstance.keyConfigs.pageUp = "shift+33";// shift+pageup

              scrollInstance.keyConfigs.pageDown = "shift+34";//shift+pagedown


Sample: http://jsplayground.syncfusion.com/naplfvbn


Jayaprakash K.


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