Components / Pager

Responsive Design

The Pager supports responsive web-design by adapting its layout based on the set width or the available screen size.

When the Pager template is used, the default responsive behavior is disabled, as the developer has full control over the Pager content.

Visible Pager elements

The Pager component determines which internal elements to render based on its width.
When the Pager width is greater than or equal to 768 pixels, all elements are visible:

Breaking Points

  • 768px - When the Pager width is less than 768px, the Info element is hidden.
  • 600px - When the Pager width is less than 600px, the PageSizes element is also hidden. If the Pager type is numeric, the page number buttons are replaced with a Select element.

The following example demonstrates the different Pager layouts based on its width.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="wrapper">
            <kendo-slider style="width: 500px;" [min]="300" [max]="800" [smallStep]="20" [largeStep]="5" [(ngModel)]="width"></kendo-slider>
            <span>Current width: {{width}}px</span>
        </div>
        <kendo-datapager
            [style.width.px]="width"
            [pageSize]="pageSize"
            [skip]="skip"
            [total]="total"
            (pageChange)="onPageChange($event)">
        </kendo-datapager>
    `,
    styles: [`
        .wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 0;
            margin-bottom: 20px;
        }
    `]
})
export class AppComponent {
    public pageSize = 10;
    public skip = 0;
    public total = 50;
    public width = 768;

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

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 { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, PagerModule, FormsModule, InputsModule]
})
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