Grid Keyboard navigation and selection

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().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