Changing TabIndex for Grid Pager Elements

[Daniel]

For adherence to compliance standards, I would like to provide the ability to focus the grid pager elements via the keyboard.

Given the following grid:

@(Html.Kendo().Grid<WebPortal.WebModels.Search.MemberReference>()
    .Name("MemberGrid")
    .HtmlAttributes(new { style = "height: 220px;" })
    .Columns(columns =>
    {
        columns.Bound(m => m.FullName).Title("Member Name").Width(230)
            .ClientTemplate("<a href='javascript:' onclick=\"selectMember('#: ProperNameWithCityState#', '#: City#', '#: State#', '#: SystemId#', '" + Model.InputSystemId + "', '" + Model.InputFullName + "')\" >#= FullName#</a>");
        columns.Bound(m => m.HccId).Title("ID").Width(230);
        columns.Bound(m => m.BirthDate).Title("Birth Date").Width(80);
        columns.Bound(m => m.City).Title("City");
        columns.Bound(m => m.State).Title("State").Width(60);
    })
    .Pageable(p => p.Messages(m => m.Empty(@noSearchResultsMessage)))
    .Reorderable(reordable => reordable.Columns(true))
    .Resizable(resize => resize.Columns(true))
    .Sortable()
    .Scrollable()
    .Events(events => events.DataBound("onGridDataBound"))
    .AutoBind(false)    // Prevent initial data load
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Sort(s => s.Add("FullName"))
        .PageSize(5)
        .Read(read => read.Action("FindMembers", "Search")
            .Data("getMemberSearchInput")
        )
        .Events(events => events.Error("onKendoDataSourceError").Change("onGridDataSourceChange"))
    )
)

I am attempting to do this on the grid data bound event:

function onGridDataBound(e) {
    // set tab index on pager elements so they can be focused via keyboard
    $("#MemberGrid > div.k-pager-wrap.k-grid-pager.k-widget").find("a").not(".k-state-disabled").attr("tabindex", "0");
}

While I can verify that the jQuery selection is correct, the tab index does not seem to get persisted in the rendered code. The rendered pager elements still have a tab index of "-1".

Is there another event I should be using?

[Petur Subev]

Hello Daniel,

Your approach looks correct, however your code wont find any elements to modify since the pager is still not fully re-created at the moment the dataBound event is triggered.

You can use a timeout to 'wait' for the pager to be re-constructed.

Also you will have to override the kendo styles which remove the default outline styles.

Here is a Dojo example:

http://trykendoui.telerik.com/@rusev/oxEb

Kind Regards,
Petur Subev
Telerik

 

 

[Daniel]

Thanks Petur, that worked great!

Dan

[Alex Hajigeorgieva]

Hi,

Just a quick update that we have a feature request for this functionality to be built-in and the more popularity it gains, the sooner we will be able to include it in our planning. 

You can upvote it here:

https://feedback.telerik.com/kendo-jquery-ui/1432833-make-it-possible-to-tab-the-pages-in-the-pager-in-the-kendo-ui-grid

Regards,
Alex Hajigeorgieva
Progress Telerik