Keyboard navigation and selection demo

adding keyboard navigation functionality using custom js, any grid with keynav class assigned will get this functionality


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
KeyboardNavigationDemo/Index.cshtml
@(Html.Awe().Grid("KeyNavGrid")
.DataFunc("getHybrid")
.Mod(o => o.KeyNav().PageSize().PageInfo())
.Height(400)
.Selectable(SelectionType.Single)
.Columns(
new Column { Bind = "Id", Width = 70 },
new Column { Bind = "Person" },
new Column { Bind = "Food" },
new Column { Bind = "Country.Name", ClientFormat = ".CountryName", Header = "Country" },
new Column { Bind = "Location" }))

<script>
$(function () {
$(document).on('keydown', function (e) {
if (e.altKey && e.which == 71)// alt + g
{
$('#KeyNavGrid').focus();
}
});
});


// get data from the server on the first call only
var litems;
function getHybrid(gp) {
var g = utils.getGridParams(gp);
function map(o) {
return {
Id: o.Id, Person: o.Person, Food: o.Food, Location: o.Location,
Date: o.Date, CountryName: o.Country.Name, ChefName: o.Chef.FirstName + ' ' + o.Chef.LastName
};
};

var opt = { key: "Id", map: map, dates: ["Date"] };

if (litems) {
return utils.gridModelBuilder(this, g, litems, opt);
}

return $.post('@Url.Action("GetLunches","GridClientDataDemo")').then(function (items) {
litems = items;
var model = utils.gridModelBuilder(this, g, items, opt);
return model;
});
}
</script>
@*there's aslo css in common.css for this demo (see .keynav) *@