Grid Keyboard navigation and selection

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
1475ScottBananaFarringdonUniversity
1471KellyBig SaladHatton GardenRestaurant
1467HugoPizzaRedridge MountainsTavern
1463StanCheesecakeWestfallTavern
1459MarioBig SaladGoldshireHome
1455AliceSoupGhidrimestiUniversity
1451RachelSoupJisinaTavern
1447LucyShepherd's pieCarpanaHome
1443MauricePizzaOrgrimmarCentral Perk
1439PatrickApple PieFeralasTavern

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);
}

return $.get('@Url.Action("GetLunches","Data")').then(function (items) {
loadedItems = items;
opt.items = items;
return aweUtils.gridModelBuilder(opt);
});
}
</script>



Comments