k-pager numbers disappear when the window is too small

1 Answer 41 Views

Grid

1 Answer, 1 is accepted

Accepted

answered on 19 Dec 2024, 09:49 AM

Hi Dimitrios,

Thank you for the screenshots provided.

By design, the Pager of the Grid component is responsive and the responsiveness is enabled by default. On that note, when the screen is resized, the Pager adapts its appearance depending on the current size and follows certain breaking points, by which the component decides which internal elements will be rendered or replaced. More details about the breaking points of the Pager and the behavior of its internal elements' visibility upon resizing can be found below:

It is important to mention that as of v17.0.0, the Grid component started to use the standalone Pager component internally, which introduced some breaking changes that affect the Grid's pager template and should be kept in mind if such is utilized:

With the above being said, in your current scenario, it is indeed unusual as to why the page number buttons entirely disappear on a smaller screen size, because by default, these buttons should be replaced by a select element when the width becomes less than 600px. For better observation, here is a StackBlitz example that demonstrates the default behavior of the Pager's responsiveness in the Grid component where it can be tested how the page number buttons get replaced by a select element as expected:

https://stackblitz.com/edit/angular-ckxcesv3

In this line of thought, can you please provide more detailed information about the exact use-case scenario, in which the unexpected behavior of the Pager's page number buttons in the Grid disappear on smaller screen sizes? For example, is a pager template configured or is there any custom styling applied to the Grid?

Ideally, it would be great if you could modify the above StackBlitz example (or share an isolated runnable project for reproduction) in a way that the experienced behavior is replicated and send it back to me for further troubleshooting. In that way, I will be able to inspect the issue on my side and thus provide more valuable assistance on the matter.

As of now, I would suggest checking for any custom styles in your project that might target the Grid component's Pager and affect its default responsive appearance. You can also verify if the installed Kendo Themes version on your side is the supported one for the particular version of the used Kendo UI for Angular packages. This information can be found below in the "Supported Themes" section under each release:

https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui

Please observe the provided information and let me know how it goes.

Regards,
Zornitsa
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.