Grid Paging Specification

1. Revision History

Version	User	Date	Notes
0.1	Danail Marinov	July 3, 2019	Initial draft
1.0	Zdravko Kolev	June 28, 2021	Paginator template changes

Stefan Ivanov | Date:
Simeon Simeonoff | Date:
Konstantin Dinev | Date:

2. Overview

The Grid Paging Component is used to:

inform the user on which Grid page he currently is
allow navigation to the previous/next and first/last pages of the Grid content
to inform the user how many records are being displayed per page and to let him select number of records to be displayed per page

3. User Stories

As an end user:

I want to see how many records are currently being displayed per page
I want to be able to select the number of records displayed per page
I want to see on which Grid page I currently am
I want to know what is the total number of pages according to the number of records displayed //not clear do you mean number of pages???
I want to be able to navigate to the first/last Grid page through the icon button
I want to be able to navigate to the next/previous Grid page through the icon button

As a developer:

I want to be able to set the number of records shown per page
I want to be able to set Grid Paging display density
I want to be able to enable/disable/hide Pager buttons and Dropdown
I want to be able to apply theme on the Paging according to the Grid theme //add a story for the template

4. Functionality

4.1 Overview:

The Grid Paging component is attached to the Grid bottom and if the Grid includes Summary, then Paging row is placed after the Summaries. As an end user, I can change the number of records displayed per page through the dropdown that by default is positioned in the left end of the Paging row. As an end user, I can move to the first/last or next/previous page through the icon buttons that are by default placed in the right end of the Paging row.//this part duplicates the stories I'd remove it from here Changing the number of rows displayed per page may result in change of the total number of Grid pages. The number of pages depends on the total number of grid rows and the rows displayed per page.

The Grid Paging component allows you to define a custom content, as it is shown in the example below:

<igx-paginator [totalRecords]='20'>
    <igx-paginator-content>
        <div id="numberPager">
            <button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()" igxButton="flat">
                PREV
            </button>
            <span>
               Page {{paginator.page}} of {{paginator.totalPages}}
            </span>
            <button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()" igxButton="flat">
                NEXT
            </button>
        </div>
    </igx-paginator-content>
</igx-paginator>

There are two new components that can be used as predefined solutions for a page size select element and page navigation.

<igx-paginator #pag [totalRecords]='20'>
    <igx-paginator-content>
        <igx-page-size></igx-page-size>
        <igx-page-nav></igx-page-nav>
    </igx-paginator-content>
</igx-paginator>

4.2 Display density - Comfortable, Cozy and Compact

Comfortable

Cozy

Compact

4.3 Pagination with a Tree Grid

If paging is integrated with Tree Grid, the number of displayed items includes all rows regardless of the level they belong to. Because of that, if I, as an end user, collapse/expand some of the rows that have nested items, that would affect the total number of pages within the grid. Minimum number of pages is displayed when all top level rows are collapsed. Maximum number of pages is displayed when all available rows are expanded.

4.4 Pagination with a Hierarchical Grid

If paging is integrated with Hierarchical Grid, then each grid (that have at least one item) has its own paging. If a grid does not have any records, then Paging is not displayed. Note that the Paging component on the top parent level is indicating the number of items only on its level, without including nested items.//**here also explain that paging is enabled per grid, so we may have a page-able root-level grid and all the others inside of it can be not-page-able or any such combination basically

4.6 API

Events

perPageChange - Emitted when perPage property value of the paginator is changed.
pageChange - Emitted after the current page is changed.
paging - Cancellable - Emitted before paging is performed.
pagingDone - Emitted after paging is performed.