Awesome ASP.net Core and MVC Controls

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 = "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 loadedItems;
function getHybrid(sgp) {
var gp = utils.getGridParams(sgp);

var opt = {
key: "Id",
gp: gp
};

if (loadedItems) {
opt.items = loadedItems;
return utils.gridModelBuilder(opt);
}

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



Comments

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.