Angular Devextreme - Get total number of rows on current page

Question

In my Angular App, I have a requirement to display total number of rows on current page in pagination section. But currently Devextreme grid row count returns total row count irrespective of page.

Below is my code :-

<dxo-paging [pageSize]="5"> </dxo-paging>
    <dxo-pager
        [visible]="true"
        [allowedPageSizes]="allowedPageSizes"
        [displayMode]="displayMode"
        [showPageSizeSelector]="showPageSizeSelector"
        [showInfo]="true"
        infoText="Displaying {0} -  {2} of {1} "
        [showNavigationButtons]="showNavButtons"
      >
      </dxo-pager>

Below screenshot :-

Now i have only 5 rows in the grid but it shows 11 which is the total row count which i have received from database. Please advise.

Answer 1

If i understand correctly, you want to show 1-5 on the first page, 6-10 on the second page and so on. You can achieve that by binding a function to the [infoText] property and customize the text output. This is not found in the official documentation but it works.

HTML:

<dxo-paging [pageSize]="5"> </dxo-paging>
<dxo-pager
    [visible]="true"
    [allowedPageSizes]="allowedPageSizes"
    [displayMode]="displayMode"
    [showPageSizeSelector]="showPageSizeSelector"
    [showInfo]="true"
    [infoText]="infoText"
    [showNavigationButtons]="showNavButtons">
</dxo-pager>

JS/TS:

infoText(currentPageNumber, totalPageCount, totalRowCount) {
    const myPageSize = 5; // use global variable instead and bind it to dxo-paging
    const from = +currentPageNumber * myPageSize - (myPageSize - 1);
    const to = +currentPageNumber * myPageSize;
    return `Displaying ${from}-${to}`;
}