Paging in Angular Grid component

21 Dec 2022 / 4 minutes to read

Paging provides an option to display Grid data in page segments. To enable paging, set the allowPaging to true. When paging is enabled, pager component renders at the bottom of the grid. Paging options can be configured through the pageSettings.

In the below sample, pageSize is calculated based on the grid height by using the load event.

To use Paging, you need to inject PageService in the provider section of AppModule.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid id='PagingGrid' [dataSource]='data' (load)='load()' [allowPaging]='true' height=325>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data: object[];
    @ViewChild('grid') public Grid: GridComponent;
    ngOnInit(): void {
        this.data = data;
    }
    load() {
        const rowHeight: number = this.Grid.getRowHeight();  // height of the each row
        const gridHeight: any = this.Grid.height;  // grid height
        const pageSize: number = this.Grid.pageSettings.pageSize;   // initial page size
        const pageResize: any = (gridHeight - (pageSize * rowHeight)) / rowHeight; // new page size is obtained here
        this.Grid.pageSettings.pageSize = pageSize + Math.round(pageResize);
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, PageService, ToolbarService, EditService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService, ToolbarService, EditService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

You can achieve better performance by using grid paging to fetch only a pre-defined number of records from the data source.

Template

You can use custom elements inside the pager instead of default elements. The custom elements can be defined by using pagerTemplate. Inside this template, you can access the CurrentPage, pageSize, pageCount,totalPage and totalRecordCount values.

Source

Preview

app.component.ts

app.template.html

app.module.ts

main.ts

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { ChangeEventArgs } from '@syncfusion/ej2-inputs';
import { PageSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    templateUrl: 'app/app.template.html'
})
export class AppComponent implements OnInit {
    public data: object[];
    public initialPage: PageSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.initialPage = { pageSize: 5 };
    }

    change(args: ChangeEventArgs) {
        this.initialPage = { currentPage: args.value };
    }
}

<ejs-grid #grid [dataSource]='data' [allowPaging]='true'
[pageSettings]='initialPage'>
    <ng-template #pagerTemplate let-data>
    <div class="e-pagertemplate">
        <div class="col-lg-12 control-section">
            <div class="content-wrapper">
              <ejs-numerictextbox format='###.##' step='1' min='1' max='3' value={{data.currentPage}} 
              (change)='change($event)'></ejs-numerictextbox>
            </div>
        </div>
        <div id="totalPages" class="e-pagertemplatemessage" 
         style="margin-top:5px;margin-left:30px;border: none; display: inline-block ">
         <span class="e-pagenomsg">{{data.currentPage}} of {{data.totalPages}} pages 
         ({{data.totalRecordsCount}} items)</span>
      </div>
    </div>
    </ng-template>
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' width=120></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
    </e-columns>
    </ejs-grid>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
import { NumericTextBoxComponent } from '@syncfusion/ej2-angular-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent, NumericTextBoxComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService,
                GroupService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

The pager Dropdown allows you to change the number of records in the Grid dynamically. It can be enabled by defining the pageSettings.pageSizes property as true.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowPaging]='true' height='268px' [pageSettings]='pageSettings'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data: Object[];
    public pageSettings: Object;

    ngOnInit(): void {
        this.data = data;
        this.pageSettings = { pageSizes: true, pageSize: 12 };
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, PageService, ToolbarService, EditService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService, ToolbarService, EditService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

By default, Pager will be rendered at the bottom of the Grid. You can also render the Pager at the top of the Grid by using the dataBound event.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid id='pagerAtTop' [dataSource]='data' [allowPaging]='true' (dataBound)='dataBound()'
               height='268px' [pageSettings]='pageSettings'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data: object[];
    public pageSettings: object;
    @ViewChild('grid') public grid: GridComponent;
    public toolbar: ToolbarItems[];
    public initialGridLoad = true;

    ngOnInit(): void {
        this.data = data;
        this.pageSettings = { pageSizes: true, pageSize: 12 };
    }
    dataBound() {
        if (this.initialGridLoad) {
            this.initialGridLoad = false;
            const pager = document.getElementsByClassName('e-gridpager');
            let topElement;
            if (this.grid.allowGrouping || this.grid.toolbar) {
                topElement = this.grid.allowGrouping ? document.getElementsByClassName('e-groupdroparea') :
                    document.getElementsByClassName('e-toolbar');
            } else {
                topElement = document.getElementsByClassName('e-gridheader');
            }
            this.grid.element.insertBefore(pager[0], topElement[0]);
        }
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, PageService, ToolbarService, EditService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService, ToolbarService, EditService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

During the paging action, the pager component triggers the below three events.

The created event triggers when Pager is created.

The click event triggers when the numeric items in the pager is clicked.

The dropDownChanged event triggers when pageSize DropDownList value is selected.

Paging in Angular Grid component

Template

Pager with Page Size Dropdown

Render Pager at the Top of the Grid

See Also