Events

The Pager emits pageChange and pageSizeChange events.

Handling the Events

To process the data when the Pager current page is changed, handle the pageChange event that exposes the skip and take values, necessary for obtaining the desired items.

The pageSizeChange event is triggered when selecting a new value from the PageSizes dropdown. If not prevented, it also triggers the pageChange event with the new page size, and skip 0.

import { PageChangeEvent, PageSizeChangeEvent } from '@progress/kendo-angular-pager';
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-datapager
            [total]="total"
            [pageSize]="pageSize"
            [pageSizeValues]="pageSizeValues"
            [skip]="skip"
            (pageChange)="onPageChange($event)"
            (pageSizeChange)="onPageSizeChange($event)">
        </kendo-datapager>
        <event-log title="Event log" [events]="events">
        </event-log>
    `
})

export class AppComponent {
    public skip = 0;
    public pageSize = 10;
    public total = 100;
    public show = false;
    public pageSizeValues = [5, 10, 20, 50, 100];
    public events: string[] = [];

    public onPageChange(e: PageChangeEvent): void {
        this.log('pageChange', e);
        this.skip = e.skip;
        this.pageSize = e.take;
        // process the data manually
    }

    public onPageSizeChange(e: PageSizeChangeEvent): void {
        this.log('pageSizeChange', e);
    }

    private log(event: string, arg: any): void {
        this.events.push(`event: ${event}, event data: ${arg ? JSON.stringify(arg) : ''}`);
    }
}
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PagerModule } from '@progress/kendo-angular-pager';
import { AppComponent } from './app.component';
import { EventLogComponent } from './event-log.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent, EventLogComponent],
    imports: [BrowserModule, BrowserAnimationsModule, PagerModule, FormsModule]
})
export class AppModule {}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events.reverse()">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Preventing the PageSizeChange Event

In some scenarios it may prove useful to prevent the Pager pageSizeChange event, and perform some custom logic.

The following example demonstrates how to open a confirmation dialog when the page size is greater than some arbitrary value, set by the developer, as displaying so many items could cause performance issues.

import { PageChangeEvent, PageSizeChangeEvent } from '@progress/kendo-angular-pager';
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <kendo-datapager
          [total]="total"
          [pageSize]="pageSize"
          [pageSizeValues]="pageSizeValues"
          [skip]="skip"
          (pageChange)="onPageChange($event)"
          (pageSizeChange)="onPageSizeChange($event)">
       </kendo-datapager>
       <kendo-dialog *ngIf="show" title="Please confirm" (close)="close('cancel')">
            <p style="margin: 30px; text-align: center;">Are you sure you want to proceed with this page size?</p>
            <kendo-dialog-actions>
                <button kendoButton (click)="close('no')">No</button>
                <button kendoButton (click)="close('yes')" primary="true">Yes</button>
            </kendo-dialog-actions>
       </kendo-dialog>
    `
})

export class AppComponent {
    public skip = 0;
    public pageSize = 10;
    public total = 100;
    public show = false;
    public pageSizeValues = [5, 10, 20, 50, 100];
    private newPageSize: number;

    public onPageChange(e: PageChangeEvent): void {
        this.skip = e.skip;
        this.pageSize = e.take;
    }

    public onPageSizeChange(e: PageSizeChangeEvent): void {
        if (e.newPageSize >= 50) {
            e.preventDefault();
            this.newPageSize = e.newPageSize;
            this.show = true;
        }
    }

    public close(status: any): void {
        if (status === 'yes') {
            this.onPageChange({
                skip: this.skip,
                take: this.newPageSize
            });
        }

        this.show = false;
    }
}
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PagerModule } from '@progress/kendo-angular-pager';
import { DialogModule } from '@progress/kendo-angular-dialog';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [BrowserModule, BrowserAnimationsModule, PagerModule, FormsModule, DialogModule, ButtonsModule]
})
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

In this article