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.
Unfortunately, activation email could not send to your email. Please try again.

Grid autopaging when controlled by UP and DOWN arrow keys

Thread ID:

Created:

Updated:

Platform:

Replies:

124135 May 19,2016 09:06 AM May 25,2016 08:48 AM ASP.NET MVC 5
loading
Tags: Grid
Tom Frajer
Asked On May 19, 2016 09:06 AM

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

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

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 


Tom Frajer
Replied On May 23, 2016 05:00 PM

Brilliant! Thank you sooo much!

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

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 


Tom Frajer
Replied On May 24, 2016 04:03 AM

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 08:48 AM

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 
 


CONFIRMATION

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.

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.

;