Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Michael Dahm
350
igx-grid custom paginator
posted

Hallo,

I am currently using a igx-paginator in my Grid. 

 

The default paginator looks something like this:

 

So we have the items per page on the left side and the navigation on the right side. 

 

For my Layout, I want to have the paginator looking like this:

 

 

As you can see, first of all: Both items per page and navigation elements are side by side on the right end of the paginator. Additionally, the page index is between them, instead beeing inside of the navigation.

 

Is there any way, i can access the template to rearrange these items? So far, i only found out that you can use „igx-page-size" and „igx-page-nav" inside the „igx-paginator-content" template, but it's not possible to access the elements inside.

 

Im currently using the Paginator like this:

<igx-paginator #paginator [hidden]="!showPaginator" [perPage]="10">
                <igx-paginator-content class="paginator-content">
                    <igx-page-size class="paginator-page-size"></igx-page-size>
                    <igx-page-nav class="paginator-page-nav"></igx-page-nav>
              </igx-paginator-content>
 </igx-paginator>

Parents
  • 1700
    Offline posted

    Hello Michael,

    Your desired layout could be achieved by templating the paginator and modifying some of its CSS classes. For the page size you would need to modify the ‘.igx-page-size’ class and simply set the justify-content property to right. To change the text of the label to 'Zeilen pro Seite' you would need to access the label of the igx-page-size component, which you can inspect in your browser and then change its innerHTML to 'Zeilen pro Seite'. It could be done with the following code:

     

    let pageSizeLable: Element = document.getElementsByClassName(
      'igx-page-size__label'
    )[0];

    pageSizeLable.innerHTML = 'Zeilen pro Seite';

    Regarding the page index and total pages, this could be achieved by placing a div between the igx-page-size component and igx-paginator component and use string interpolation to display both the start and end indexes as well as total records.

    To remove the page index from the navigation button the following class should be used ‘.igx-page-nav__text’ and its display property should be set to none.

    Then to place the navigation to the right you would need to modify the following class – ‘.igx-page-nav’ and set the text-align property to right and the flex property to none.

    The CSS classes needed to achieve this layout are the following:

     

    .rightAlign {
  text-align: right;
  display: inherit;
  margin-left: 10px;
  margin-right: 10px;
}

.igx-page-nav__text {
  display: none;
}

.igx-page-size {
  justify-content: right;
}

.igx-page-nav {
  text-align: right;
  flex: none;
}

    Additionally for displaying the start and end indexes you would need to handle the following events – pageChange and perPageChange. The first one is used when the user changes the page and the other is used when the page size has been changed.

    Here you can find a small sample that demonstrate what I have explained above. Additionally, I am adding a gif that demonstrates the behavior of the paginator.

     

    Please test the sample on your side and let me know if you need any further assistance.

    Regards,
    Ivan Kitanov

Reply Children