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


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.

2 Replies

GG Greg Gannicott 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

JK Jayaprakash Kamaraj Syncfusion Team 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.

Live Chat Icon For mobile
Up arrow icon