Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paginator: The dropdownItemTemplate property can't be configured to target the "jump to page" dropdown instead of the "rows per page" dropdown #14269

Closed
nicohenao opened this issue Dec 4, 2023 · 0 comments
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add Type: New Feature Issue contains a new feature or new component request
Milestone

Comments

@nicohenao
Copy link
Contributor

nicohenao commented Dec 4, 2023

Describe the bug

The Paginator component has two possible dropdowns to be displayed:

Rows per page dropdown (visible by default)

image

Jump to page dropdown (visible when the showJumpToPageDropdown property is set to true)

image

The problem

This component's API has an optional dropdownItemTemplate property to allow a custom template for the items of "the dropdown", but it is not clear which of the two possible dropdowns this property is targeted to. The documentation says: "Template instance to inject into the dropdown item inside in the paginator.", without specifying which of the two dropdowns will use the template for their items.

I found that it targets the "Rows per page" dropdown, but I was trying to display a custom template for the "Jump to page" dropdown so that I can customize the options for the page numbers in the dropdown (See the StackBlitz example).

Environment

All environments

Reproducer

https://stackblitz.com/edit/github-ceg3fe?file=src%2Fapp%2Fapp.component.html

Angular version

16.2.12

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.2

Browser(s)

No response

Steps to reproduce the behavior

Setup a <p-paginator> element like the one in the StackBlitz example, set the showJumpToPageDropdown property to true, the showPageLinks property to false, and the dropdownItemTemplate to a TemplateRef defined in the HTML template as an <ng-template> and in the component's TS code as a @ViewChild property. (See the StackBlitz example).

You will see that the custom template does not get rendered anywhere (since the "rows per page" dropdown is not visible in this example, and should not be visible for a use case like this one), and there is not an option to inject a custom template to the "Jump to page" dropdown items.

Expected behavior

In my opinion, I should be able to choose which of the two dropdowns I want to customize with the template for the items, or better yet, a new property could be added to the Paginator's API to allow a custom template for the "jump to page" dropdown, similar to the dropdownItemTemplate property, without introducing breaking changes.

I have created a PR to fix this issue: #14270

@nicohenao nicohenao added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 4, 2023
@nicohenao nicohenao changed the title Paginator: The dropdownItemTemplate property can't be configured to target the "jump to page" dropdown insted of the "rows per page" dropdown Paginator: The dropdownItemTemplate property can't be configured to target the "jump to page" dropdown instead of the "rows per page" dropdown Dec 4, 2023
@cetincakiroglu cetincakiroglu added this to the 17.13.0 milestone Mar 22, 2024
@cetincakiroglu cetincakiroglu added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add Type: New Feature Issue contains a new feature or new component request and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Mar 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add Type: New Feature Issue contains a new feature or new component request
Projects
None yet
Development

No branches or pull requests

2 participants