Row Pagination This section describes how to display a fixed amount of rows, in other words, page by page.
Live example
To allow the user to paginate the DikeGrid rows, you must provide an input property named allowPagination
at the grid scope.
row-pagination.component.html
Copy <dike-grid id="grid-row-pagination" height="700px" #grid="dkgGrid"
[allowPagination]="gridProperties.allowPagination"
[pageSize]="gridProperties.pageSize">
</dike-grid>
You can change the value of the allowPagination
property at runtime .
Open the Floating Configuration Panel and click on the Allow Pagination checkbox.
After enabling the pagination, you will see the DikeGrid paginator at the bottom of the content rows.
Page size
By default, the page size is 50 . You can change this value by providing an input property named pageSize
.
As you can see in the previous code snippet, we have bound the pageSize
property to the gridProperties
object. Therefore, you can open the Floating Configuration Panel and change the value for the page size .
Since the DikeGrid structure uses the CSS Grid Layout specification, the paginator is called Pagination Row . Indeed, the Pagination Row is the template-row definition where the paginator lives.
For this section, we have bound the input property paginationRowHeight
to the related property from the gridProperties
object.
row-pagination.component.html
Copy <dike-grid id="grid-row-pagination" height="600px" #grid="dkgGrid"
[paginationRowHeight]="gridProperties.paginationHeight">
</dike-grid>
The DikeGrid internally uses the MatPaginator component. Therefore, the DikeGrid definition wraps the MatPaginator instance.
Before accessing and using the pagination API , you must retrieve the related DikeGrid instance by querying the component's view.
row-pagination.component.html row-pagination.component.ts
Copy <dike-grid id="grid-row-pagination" height="600px" #grid="dkgGrid">
</dike-grid>
Copy @ Component ({
selector : 'row-pagination' ,
templateUrl : './row-pagination.component.html' ,
styleUrls : [ './row-pagination.component.scss' ] ,
encapsulation : ViewEncapsulation .None ,
changeDetection : ChangeDetectionStrategy .OnPush
})
export class RowPaginationComponent implements OnInit , OnDestroy {
// Retrieve the DikeGridComponent<T> instance from the view:
@ ViewChild ( 'grid' ) dikeGrid : DikeGridComponent < Employee >;
// ...
}
The pagination API is an instance of type DikeGridPagination
under the DikeGridComponent
through the read-only property named pagination
.
The DikeGrid pagination API exposes the MatPaginator instance through a read-only property named matPaginator .
Retrieving and using the DikeGrid pagination API helps in defining a custom Datasource .
Every time the user navigates through the available pages, the DikeGrid instance emits a page event.
Since you can allow the pagination at runtime, the pagination API exposes an event that fires the MatPaginator instance.
The pagination API exposes the following events:
Event Description This event fires every time the user navigates through the available pages.
This event fires when the user allows or disallows the DikeGrid's pagination.
We are listening to both events:
row-pagination.component.html row-pagination.component.ts
Copy <dike-grid id="grid-row-pagination" height="600px" #grid="dkgGrid"
(pageChange)="onPageChange($event)"
(paginatorChange)="onPaginatorChange($event)">
</dike-grid>
Copy onPageChange (page: PageEvent): void {
console .log ( 'Page change: ' , page);
}
onPaginatorChange (paginator: MatPaginator): void {
console .log ( 'Paginator change: ' , paginator);
}
For the pageChange
event, the emitted object is the same as the MatPaginator sends. For further details, see the Angular Material official docs.
Open the dev console to see the output of the pagination events.
Summary
To perform the pagination operation, you must allow it by providing an input property named allowPagination
. The DikeGrid definition internally uses the MatPaginator component. Therefore, every DikeGrid instance exposes its corresponding MatPaginator instance through the pagination API .
Complete code for this section
row-pagination.component.html row-pagination.component.ts
Copy <dike-grid id="grid-row-pagination" height="600px" #grid="dkgGrid"
[displayRowId]="gridProperties.displayRowId"
[gridElevation]="gridProperties.matElevation"
[gridElevationValue]="gridProperties.elevationValue"
[striped]="gridProperties.stripeRows"
[verticalRowLines]="gridProperties.verticalRowLines"
(pageChange)="onPageChange($event)"
(paginatorChange)="onPaginatorChange($event)"
[allowPagination]="gridProperties.allowPagination"
[pageSize]="gridProperties.pageSize"
[paginationRowHeight]="gridProperties.paginationHeight"
[datasource]="dkgDataSource">
<dike-grid-column
fieldName="employeeId"
headerText="Employee Id"
dataType="Text"
width="350">
</dike-grid-column>
<dike-grid-column
fieldName="country"
headerText="Country"
dataType="Text"
width="250">
</dike-grid-column>
<dike-grid-column
fieldName="completeNameGroup"
headerText="Complete Name">
<dike-grid-column
fieldName="firstName"
headerText="Name"
dataType="Text"
width="150">
</dike-grid-column>
<dike-grid-column
fieldName="lastName"
headerText="Surname"
dataType="Text"
width="150">
</dike-grid-column>
</dike-grid-column>
<dike-grid-column
fieldName="gender"
headerText="Gender"
dataType="Binary"
width="130">
</dike-grid-column>
<dike-grid-column
fieldName="age"
headerText="Age"
dataType="Numeric"
contentAlign="center"
width="100">
</dike-grid-column>
<dike-grid-column
fieldName="email"
headerText="Email"
dataType="Text"
width="300">
</dike-grid-column>
<dike-grid-column
fieldName="hireDate"
headerText="Hire Date"
dataType="Date"
width="150">
</dike-grid-column>
</dike-grid>
Copy import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatPaginator , PageEvent } from '@angular/material/paginator' ;
import { Subscription } from 'rxjs' ;
import { DikeGridComponent , DikeGridDataSourceInput } from '@dikesoft/angular-data-grid' ;
import { DikeGridProperties } from 'app/core/config/dike-grid.properties' ;
import { Employee } from 'app/mock-api/common/employees/data.model' ;
import { DikeGridConfig } from 'app/services/dike-grid.config.service' ;
import { SampleData } from 'app/services/sample-data.service' ;
@ Component ({
selector : 'row-pagination' ,
templateUrl : './row-pagination.component.html' ,
styleUrls : [ './row-pagination.component.scss' ] ,
encapsulation : ViewEncapsulation .None ,
changeDetection : ChangeDetectionStrategy .OnPush
})
export class RowPaginationComponent implements OnInit , OnDestroy {
// Retrieve the DikeGridComponent<T> instance from the view:
@ ViewChild ( 'grid' ) dikeGrid : DikeGridComponent < Employee >;
dkgDataSource : DikeGridDataSourceInput < Employee >;
gridProperties : DikeGridProperties ;
private changeGridPropertiesSubscription : Subscription = Subscription . EMPTY ;
constructor (
private cdr : ChangeDetectorRef ,
private gridConfig : DikeGridConfig ,
private sampleData : SampleData ) { }
ngOnInit () : void {
this .dkgDataSource = this . sampleData .getEmployees ( 10000 );
// Listening to any config property change:
this .setChangeGridPropertiesSubscription ();
}
ngOnDestroy () : void {
this . changeGridPropertiesSubscription .unsubscribe ();
}
onPageChange (page : PageEvent ) : void {
console .log ( 'Page change: ' , page);
}
onPaginatorChange (paginator : MatPaginator ) : void {
console .log ( 'Paginator change: ' , paginator);
}
private setChangeGridPropertiesSubscription () : void {
this . changeGridPropertiesSubscription .unsubscribe ();
this .changeGridPropertiesSubscription = this . gridConfig . configChange .subscribe ((props : DikeGridProperties ) => {
this .gridProperties = props;
this . cdr .markForCheck ();
});
}
}