Adding keyboard navigation functionality using custom js, any grid with keynav class assigned will get this functionality
Drag a column header and drop it here to group by that column
Id
Person
Food
Country
Location
1475
Scott
Banana
Farringdon
University
1471
Kelly
Big Salad
Hatton Garden
Restaurant
1467
Hugo
Pizza
Redridge Mountains
Tavern
1463
Stan
Cheesecake
Westfall
Tavern
1459
Mario
Big Salad
Goldshire
Home
1455
Alice
Soup
Ghidrimesti
University
1451
Rachel
Soup
Jisina
Tavern
1447
Lucy
Shepherd's pie
Carpana
Home
1443
Maurice
Pizza
Orgrimmar
Central Perk
1439
Patrick
Apple Pie
Feralas
Tavern
alt + g - select grid
up and down - move to next/prev row, if it's the last or first row it will go on next/prev page
page up and page down - next/prev page
home, end - first, last row
enter, space - select row
show code
KeyboardNavigationDemo/Index.cshtml
@(Html.Awe().Grid("KeyNavGrid") .DataFunc("getHybrid") .Mod(o => o.KeyNav().Main()) .Height(400) .Selectable(SelectionType.Single) .Columns( new Column { Bind = "Id", Width = 70 }, new Column { Bind = "Person" }, new Column { Bind = "Food.Name" }, new Column { Bind = "CountryName", Header = "Country" }, new Column { Bind = "Location" }))
<script> $(function () { $(document).on('keydown', function (e) { if (e.altKey && e.which == 71)// alt + g { $('#KeyNavGrid').trigger('focus'); } }); });
// get data from the server on the first call only var loadedItems; function getHybrid(sgp) { var gp = aweUtils.getGridParams(sgp);
var opt = { key: "Id", gp: gp };
if (loadedItems) { opt.items = loadedItems; return aweUtils.gridModelBuilder(opt); }