Kendo Pager Info Text Editing

[Charles]

I want to edit the Kendo Pager Info such that the items counts is properly represented by its locale. Ex. 1025 ---> 1,025

Here's the approach I did:

I converted the total of the PagerInfoComponent from number to any, and applied this to a lifecycle hook:

this.pagerInfoComponent.total = this.pagerInfoComponent.total.toLocaleString();
this.pagerInfoComponent.ngOnInit();

This is causing a problem as it's resulting to this: 1 - n of 1025 items.

Another way I could do this is to directly edit it via DOM, but then I would have to update the values constantly for any change I make in a grid.

How can I properly best approach this? Please see link here: https://stackblitz.com/edit/angular-mejm68

Thanks in advance!

[Charles]

For your reference, this is what I did to update the kendo pager info:

 

@ViewChild(PagerInfoComponent, {static: false}) pagerInfoComponent: PagerInfoComponent;

    ngDoCheck(): void {
      let kendoPager  = document.getElementById("kendo-pager");
      if (kendoPager !== null && kendoPager !== undefined) {
        kendoPager.innerText = this.pagerInfoComponent.currentPageText + " - " + this.pagerInfoComponent.maxItems + " of " + this.pagerInfoComponent.total.toLocaleString() + " items"
      }
    }

I am able to do update the text to my preferred style. For some reason, ngDoCheck in StackBlitz takes 2 clicks when moving along pages to properly render the string.

[Martin]

Hi Charles,

Thank you for the provided code snippets.

I am a little confused regarding which component is referred - Grid Pager or Pager component. I assume that the Grid Pager needs to be customized. Correct me if I am wrong.

In order to customize the Kendo Angular Grid pager, the developer can utilize the kendoPagerTemplate. The template context provides fields, such as totalPages, currentPage and etc. which can be further processed.

I passed the totalPages number to a function which converts the number toLocalString() and it is displayed as expected (for demonstrating purposes I hardcoded the number):

     <ng-template
        kendoPagerTemplate
        let-totalPages="totalPages"
        let-currentPage="currentPage"
      >
        <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
        <kendo-pager-numeric-buttons
          [buttonCount]="5"
        ></kendo-pager-numeric-buttons>
        <kendo-pager-next-buttons></kendo-pager-next-buttons>
        <kendo-pager-info></kendo-pager-info>
        Total page {{getTotal(1500)}}
      </ng-template>

 

https://stackblitz.com/edit/angular-62i5hr?file=app%2Fapp.component.ts

Having the number, the developer can localize it using the Internationalization package which provides services and pipes for parsing and formatting of dates and numbers.

I hope this helps. But if you have any further questions do not hesitate to write back.

Regards,
Martin
Progress Telerik

[Charles]

To be specific, I'd like to edit the kendo-pager-info element, and apply localization to it. Please see the attached file for reference.

[Martin]

Hi Charles,

Thank you for the additional details provided.

Indeed the <kendo-pager-info> does not provide a template itself. However, using the pager template to customize the content in accordance with your preference still a valid approach:

https://stackblitz.com/edit/angular-zj3dsw-eajdtb?file=app/app.component.ts

Regards,
Martin
Progress Telerik

[Lino]

Hi Martin,

I'm trying to use your approach with the kendo-angular-grid version 11.1.0, but after adding the <div> for customizing pager-info the whole Pager is not displayed at all, and I don't see any error message neither in the browser's console nor in the terminal.

Any help on this would be pretty much appreciated. I've already spent 2-3 hours trying to customize the pager-info :( 
Thanks

@progress/kendo-angular-grid":"^11.1.0

[Martin]

Hi Lino,

The provided StacBlitz demo was created back in 2020 with Angular 7 and Grid v3.12.

Here is the same example using Angular 15 and Grid v11.1.0:

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

Regards

[Charles]

Thanks for the quick clarification.

 

Regards,

Charles