I'm having some accessibility issues with my Kendo MVC Grid. When using the Tab button I am unable to access the pages options at the bottom left corner of the grid. After looking over your documentation I've seen that pressing ALT + Page Up or ALT + Page Down should allow me to move through the pages. Unfortunately this does not work and I'm unsure what may be causing this issue. Here is an example of my code.
@(Html.Kendo().Grid<AuthDTO.ListUserManagement>()
.Name("ManageUsersGrid")
.HtmlAttributes(new {style = " width:100%; height:86%"})
.Pageable()
.Pageable(pageable => pageable
.PageSizes(true)
.Messages(msg => msg.Display("{0:d0} - {1:d0} of {2:d0} items"))
.Refresh(true))
.Reorderable(reorder => reorder.Columns(true))
.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.ColumnMenu()
.ColumnResizeHandleWidth(10)
.Resizable(resizable => resizable.Columns(true))
.Scrollable(o => o.Height("100%"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetUsers", "AppUser", new RouteValueDictionary {{"area", "AppUser"}}))
)
.Columns(columns =>
{
columns.Bound(o => o.Id)
.Filterable(false)
.Width(100)
.IncludeInMenu(false)
.Sortable(false)
.Title("Actions")
.ClientTemplate(
"# if(" + @ViewBag.DOD + " == 'true') { # +" +
"<a href=\"javascript: void(0);\" onclick=\"userEditItem('#: Id #');\" title=\"Edit\"><i class=\"disabled fa fa-pencil-square-o fa-lg\"></i><span class=\"sr-only\"></span></a>"
+ "# } else { # " +
"<a href=\"javascript: void(0);\" onclick=\"userEditItemCAC('#: Id #');\" title=\"Edit\"><i class=\"active fa fa-pencil-square-o fa-lg\"></i><span class=\"sr-only\"></span></a>"
+ "# } #" +
"<a href=\"javascript: void(0);\" onclick=\"impersonate('#: Id #');\" title=\"Impersonate User\"><i class=\"active fa fa-user fa-lg\"></i><span class=\"sr-only\"></span></a>"
);
columns.Bound(o => o.LastName)
.Width(200)
.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(o => o.FirstName)
.Title("First Name")
.Width(200)
.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(o => o.Email)
.Title("Email")
.Width(250)
.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(o => o.Phone)
.Title("Phone")
.Width(250)
.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(o => o.Organization)
.Title("Organization")
.Width(250)
.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(o => o.Active)
.Title("Active")
.Width(100)
.Filterable(false);
columns.Bound(o => o.LockedAccount)
.Title("Locked Account")
.Width(100)
.Filterable(false);
columns.Bound(o => o.LockoutDateTime)
.Title("Lockout Date Time")
.Width(200);
})
)
2 Answers, 1 is accepted
Keyboard navigation within the Grid is supported by the navigatable option as it is described here. I am attaching a sample MVC project where it worked correctly at my side.
Regards,
Plamen
Telerik
Rank 1