Changing TabIndex for Grid Pager Elements

4 posts, 0 answers
  1. Daniel
    Daniel avatar
    16 posts
    Member since:
    Feb 2013

    Posted 07 Apr 2014 Link to this post

    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?
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 09 Apr 2014 Link to this post

    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.

     
  3. Daniel
    Daniel avatar
    16 posts
    Member since:
    Feb 2013

    Posted 09 Apr 2014 in reply to Petur Subev Link to this post

    Thanks Petur, that worked great!

    Dan
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 05 Oct 2020 Link to this post

    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).

Back to Top