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

Grid autopaging when controlled by UP and DOWN arrow keys

Hi,
I was looking at this demo for keyboard interaction with grid - this is awesome functionality!
http://mvc.syncfusion.com/demos/web/grid/keyboardinteraction

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 :)

5 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team 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: 

 
@(Html.EJ().Grid<object>("Editing") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
        .AllowSorting() 
        .AllowPaging() 
        .EditSettings(edit => { edit.AllowEditing().AllowAdding().AllowDeleting(); }) 
        .Columns(col => 
        { 
            ----------------------------------------- 
       }) 
        .ClientSideEvents(eve => { eve.RowSelected("rowselect"); }) 
) 
 
-------------------------------------------------- 

<script> 
    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); 
                grid.selectRows(0); 
            } 
            else if (rowindex == 1 && select) { 
                if (grid.model.pageSettings.currentPage != 1) { 
                    $("#Editing").ejGrid("getPager").ejPager("goToPage", pageIndex - 1); 
                    grid.selectRows(11); 
                } 
            } 
            select = true; 
        } 
    }); 
 
    function rowselect(args) { 
        if (args.prevRowIndex = this.model.pageSettings.pageSize - 2) 
            select = false; 
         
    } 
</script> 


Regards, 
Prasanna Kumar N.S.V 



TF Tom Frajer May 23, 2016 09:00 PM UTC

Brilliant! Thank you sooo much!


PK Prasanna Kumar Viswanathan Syncfusion Team 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. 

Regards, 
Prasanna Kumar N.S.V 



TF Tom Frajer 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


MS Mani Sankar Durai Syncfusion Team 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.  
Regards, 
Manisankar Durai 
 


Loader.
Up arrow icon