This is a migrated thread and some comments may be shown as answers.

Changing TabIndex for Grid Pager Elements

3 Answers 136 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 07 Apr 2014, 06:05 PM
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?

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 09 Apr 2014, 11:28 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Daniel
Top achievements
Rank 1
answered on 09 Apr 2014, 11:51 AM
Thanks Petur, that worked great!

Dan
0
Alex Hajigeorgieva
Telerik team
answered on 05 Oct 2020, 03:03 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Daniel
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or