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

Grid autopaging when controlled by UP and DOWN arrow keys

Thread ID:





124135 May 19,2016 01:06 PM UTC May 25,2016 12:48 PM UTC ASP.NET MVC 5
Tags: Grid
Tom Frajer
Asked On May 19, 2016 01:06 PM UTC

I was looking at this demo for keyboard interaction with grid - this is awesome functionality!

What I would like to achieve is to be able to use only UP and DOWN arrow keys to navigate through whole grid. Problem is that once I reach last record on the page I have to press PgDown to move to the next page.
Is there any way to enable automatic paging? I mean that once I will be on lat record for given page, next press of down arrow key will bring mi to the first record of next page (sp I will not have to press PgDown).

I think this will be much more user friendly :)

Prasanna Kumar Viswanathan [Syncfusion]
Replied On May 20, 2016 08:54 AM UTC

Hi Tom, 

Thanks for contacting Syncfusion support. 

To achieve your requirement, we used keydown event and RowSelected event of ejGrid.  when we press the down arrow key on the last record the keydown event will be triggered. In this event we check the condition with PageCount and rowIndex to navigate to the next page. 

Find the code example: 

        .EditSettings(edit => { edit.AllowEditing().AllowAdding().AllowDeleting(); }) 
        .Columns(col => 
        .ClientSideEvents(eve => { eve.RowSelected("rowselect"); }) 

    var select = true; 
    $(document).on("keydown", function (e) { 
        if (e.keyCode == 40 || e.keyCode == 38) { 
            var grid = $("#Editing").ejGrid("instance"); 
            var pageIndex = grid.model.pageSettings.currentPage; 
            var rowindex = grid.getIndexByRow(grid.getSelectedRows()); 
            rowindex = rowindex + 1; 
            if (rowindex == grid.model.pageSettings.pageSize && select) { 
                $("#Editing").ejGrid("getPager").ejPager("goToPage", pageIndex + 1); 
            else if (rowindex == 1 && select) { 
                if (grid.model.pageSettings.currentPage != 1) { 
                    $("#Editing").ejGrid("getPager").ejPager("goToPage", pageIndex - 1); 
            select = true; 
    function rowselect(args) { 
        if (args.prevRowIndex = this.model.pageSettings.pageSize - 2) 
            select = false; 

Prasanna Kumar N.S.V 

Tom Frajer
Replied On May 23, 2016 09:00 PM UTC

Brilliant! Thank you sooo much!

Prasanna Kumar Viswanathan [Syncfusion]
Replied On May 24, 2016 04:29 AM UTC

Hi Tom, 

We are happy to hear that your issue has been resolved. 

Please let us know if you need any further assistance. 

Prasanna Kumar N.S.V 

Tom Frajer
Replied On May 24, 2016 08:03 AM UTC

Chrome, FF, Edge browsers are OK.

IE 11 - Not working :(

I attached screenshot with IE version that Im using.

Attachment: IE11_523ddd96.zip

Mani Sankar Durai [Syncfusion]
Replied On May 25, 2016 12:48 PM UTC

Hi Tom, 
Sorry for the inconvenience caused. 
We are able to reproduce the issue “Up arrow and down arrow is not working in IE11” and it is an already known issue. The fix for the issue will be included in our Volume 2, 2016 release which is expected to be rolled out in the mid of June, 2016 and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  
Manisankar Durai 


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

or the page will be automatically redirected to 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