Grid paging not working with keyboard

3 posts, 1 answers
  1. Justin
    Justin avatar
    12 posts
    Member since:
    Feb 2015

    Posted 16 Nov 2015 Link to this post

    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. Answer
    Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 17 Nov 2015 Link to this post

    Hello,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Justin
    Justin avatar
    12 posts
    Member since:
    Feb 2015

    Posted 17 Nov 2015 in reply to Plamen Link to this post

    Looks like things are working! Thank you!
Back to Top