Unplanned
Last Updated: 17 Jan 2023 08:07 by ADMIN

Hi.

When you have a TelerikGrid, with on OnRead event making an async call, the pager that comes with TelerikGrid doesn't show the mobile view when on a narrower device.

 

I created a blazor repl here: https://blazorrepl.telerik.com/mxOPbEuZ29PQRAQk02

 

If you view the repl in browser, open dev tools and toggle the device toolbar, and set your viewport width to something around 320px. If it loads into the preview right away, after having been first rendered on normal screensize, then the pager will adapt. To see the bug, go to the code tab, then the preview tab to have it do its initial render on mobile width. You will see something like this:

This is an issue live currently on my own websites, which had been reported to me by customers. I believe this only occurs when using the Grid's OnRead, and making an asynchronous call within it (which I represented in the repl with a Task.Delay)

I'm using as early as 3.5.0 in production, but can repro this on latest, 3.7.0.

Completed
Last Updated: 14 Dec 2022 08:07 by ADMIN
Created by: Vladimir
Comments: 1
Category: Pager
Type: Feature Request
1
Sometime I would like to see ALL grid items on one page. At this I found only option to provide a big e.g. 1000 items number for the GridPagerSettings.
Planned
Last Updated: 25 Oct 2022 11:25 by ADMIN
Scheduled for 4.1.0 (01/03/2023)
Created by: Software
Comments: 0
Category: Pager
Type: Feature Request
13
Unplanned
Last Updated: 12 Oct 2022 21:52 by Pingu

I've made a simple blazor repl demo here: https://blazorrepl.telerik.com/mmlYatun39gTFEgO21

As you can see, TotalCount is 10, and the current PageSize is also 10. When these values match, the value in the "items per page" dropdown isn't present. Select any other value, and it will be present (for 5, 20, 40). Come back to 10, and again, the value disappears.

Completed
Last Updated: 23 Aug 2022 13:42 by ADMIN
Release 3.6.0 (14 Sep 2022) (R3 2022)

I am using the following list of page sizes for the Pager:

private static readonly List<int?> _pageSizeSelectorItems = new (){ 5, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 40, 50, 60, 70, 80, 90, 100 };

The dropdown is not appearing into the correct direction and overflows the screen.

---

ADMIN EDIT

---

A possible workaround for the time being is to set some max height to the inner element of the PageSizes dropdown. You can achieve that with CSS. Thus, when the list is longer, the popup will keep that max height and a scrollbar will appear. For example: https://blazorrepl.telerik.com/mcEiYSFO39g6rfSE36.

An important point to take into consideration is that this approach will target other popup elements on the page (if any) as they have the same classes. For, example, if you have a DropDownList component, it will also have max height that you have set with the custom CSS styles. If you want to override that, you can configure the popup settings of the corresponding DropDownList  component.

 

Unplanned
Last Updated: 24 Jun 2022 13:06 by Taarti
Created by: Taarti
Comments: 0
Category: Pager
Type: Feature Request
1

The purpose of this request is to be able to choose the keyboard navigation flow of the pager component:

- arrow keys (current)

- tab navigation (disabling the arrow keys navigation but including all elements within the pager in the tab sequence)

The configuration should be available in the pager and the components that integrate it.

Duplicated
Last Updated: 15 Apr 2022 16:09 by ADMIN
Created by: Scott
Comments: 1
Category: Pager
Type: Feature Request
2
I would like to customize the label of the Pager - provide formatting for the number and change the "items" text to something custom. 
Completed
Last Updated: 06 Dec 2021 21:11 by ADMIN
Release 2.30.0
Created by: Taarti
Comments: 0
Category: Pager
Type: Bug Report
1

We have encountered the following accessibility issue with the navigation buttons of the Pager:

Snippet:

<a data-index="0" aria-label="Go to the first page" title="Go to the first page" class="k-link k-pager-nav k-state-disabled k-pager-first" aria-disabled="true" tabindex="-1"><span class="k-icon k-i-arrow-end-left" role="presentation"></span></a>

How to fix - Fix the following:

ARIA attribute cannot be used, add a role attribute or use a different element: aria-label

Completed
Last Updated: 24 Nov 2021 08:59 by ADMIN
Release 2.30.0

An accessibility issue is found on pager lists when scanned by Lighthouse in Chrome.

Tables and lists These are opportunities to improve the experience of reading tabular or list data using assistive technology, like a screen reader.

List items (<li>) are not contained within <ul> or <ol> parent elements.

Screen readers require list items (`<li>`) to be contained within a parent `<ul>` or `<ol>` to be announced properly.