Awesome grid add keyboard navigation

Title:

BI{code} ?

Hello, How can I add keyboard navigation in awesome grid ? (Awesome grid select row according to selection of up and down keys. when user press home key, awesome grid select first row. when user press end key, awesome grid select last row. when user press press page down key, awesome grid show next page.) alt + g should focus the grid when focus on the last row and pressing down key, grid will go on next page when focus first row and pressing up key, grid will go on previous page

Save Changes Cancel

asked at 18 Dec 2014

Answers

• BI{code} ?

  you can do it as shown below, this way any grid that has css class keynav will have keyboard navigation <%:Html.Awe().Grid("MultiselectGrid") .CssClass("keynav") ... <script> $(function () { $(document).on('keydown', function (e) { if (e.altKey && e.which == 71)// alt + g { $('.keynav .awe-row').first().focus(); } }); $('.keynav').on('aweload', function () { var $grid = $(this); $grid.find('.awe-row') .each(function () { $(this).attr('tabindex', 0); }) .on('keydown', function (e) { var keys = [40, 38, 35, 36, 34, 33]; if($.inArray(e.which, keys) != -1) e.preventDefault(); var $row = $(this); if (e.which == 13) // enter $row.toggleClass('awe-selected'); // or $row.click(); this might also unselect others depending on .Selectable type else if (e.which == 40) //down { if ($row.is(":last-child")) nextPage(); else $row.nextAll('.awe-row').first().focus(); } else if (e.which == 38) //up { if ($row.is(":first-child")) prevPage(); else $row.prevAll('.awe-row').first().focus(); } else if (e.which == 35) //end $row.parent().children('.awe-row').last().focus(); else if (e.which == 36) //home $row.parent().children('.awe-row').first().focus(); else if (e.which == 34) // page down { nextPage(); } else if (e.which == 33) // page up 33 { prevPage(); } }); function nextPage() { var res = $grid.data('api').getResult(); if (res.Page < res.PageCount) { $grid.data('api').load({ oparams: { page: res.Page + 1 } }); } } function prevPage() { var res = $grid.data('api').getResult(); if (res.Page > 1) { $grid.data('api').load({ oparams: { page: res.Page - 1 } }); } } $grid.find('.awe-row').first().focus(); }); }); </script> <style> .awe-row:focus { outline: auto 5px #4D90FE !important; } @-moz-document url-prefix() { .awe-row:focus { outline: 1px solid #4D90FE !important; } } </style>

  Save Changes Cancel

  

  Omu

  answered at 18 Dec 2014
• BI{code} ?

  Awesome way of handling keyboard navigation, would be appreciated if you add this to demo site?

  Save Changes Cancel

  

  Baha' Al Fataftah

  answered at 23 Mar 2015

  • it will eventually be added
    at 23 Mar 2015 Omu

please Sign In to leave an answer