We are currently upgrading the angular-slickgrid from version 2.30.4 to 3.3.2.
During the migration to version 3, we can't access the onPaginationChanged
and other callbacks from angularGridInstance as mentioned below.
this.angularGrid.paginationService.onPaginationChanged.subscribe(e => {
this.writeConsole('Info', this.constructor.name, 'onPaginationChanged', type, '-', e);
this.changeSelectionHeader(assignmentObject['internalProcess']['angularGrid'].slickGrid, assignmentObject['internalProcess']['angularGrid'].dataView);
})
We have explored your documentation and analyzed that we can get this callback from the <angular-slickgrid>
tag, however, are there any chances that we can access them through typescript itself as mentioned in above format.
Angular-Slickgrid >=3.x events are actually all JS Custom Events, so you can use any JavaScript ways of listening to event changes and that would work. You have plenty of ways to deal with what you're trying to do
<angular-slickgrid gridId="grid1"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onPaginationChanged)="onPaginationChanged($event.detail)">
</angular-slickgrid>
documented in Grid State & Preset - Wiki and gives you access to multiple things like Filters, Sorting, Pagination, Pinning
<angular-slickgrid gridId="grid1"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onGridStateChanged)="gridStateChanged($event.detail)">
</angular-slickgrid>
gridStateChanged(gridStateChanges: GridStateChange) {
console.log('Grid State changed:: ', gridStateChanges);
}
addEventListener
on the Custom EventngAfterViewInit() {
document.querySelector('[gridid="grid1"]')?.addEventListener('onPaginationChanged', (data: any) => {
console.log('event listener pagination changed', data)
})
}
not Recommended at all, it's cheating and might break in the future
I'm actually surprised that this works given that the EventPubSubService is a private
property (who knows this might break in the future), but it seems that adding a component ref is giving us access to the entire instance of Angular-Slickgrid grid even the private
service variables.
Technically speaking this should not event be allowed by Angular/TypeScript, but it looks like as of today you could cheat.
<angular-slickgrid gridId="grid1" #myGridRef
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset">
</angular-slickgrid>
ngAfterViewInit() {
this.myGridRef._eventPubSubService.subscribe('onPaginationChanged', (data:any)=> console.log('pagination changed', data))
console.log('eventPubSub', this.myGridRef._eventPubSubService)
}
EventPubSubService
to the AngularGridInstanceIt seems that this service is not exposed (yet) to the AngularGridInstance
and I could probably add it in a future version, but I recently release (this week) the version v5.0.0
of Angular-Slickgrid and I never work on older version so for this use case, you would have to upgrade to get access to this case
Requires a new Angular-Slickgrid feature (now available with v5.1.0), possibly in the future
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
this.angularGrid.eventPubSubService.subscribe('onPaginationChanged', (data:any)=> console.log('pagination changed', data))
}
Obviously the best option, in 99% of the time, is Option 1 and/or Option 2 (which is why it's documented), while other options do work, they're obviously not ideal solutions and also not documented for that reason, the last Option 5 also seems valid and might arrive (now available) in the near future but only in Angular-Slickgrid >=5.x
because I'm a single developer and this project is Open Source and I'm not being paid to support and so I'm only providing support for latest version only, which as of today is v5.0.0
and higher
As a last final note, I always provide Migration Guides between each version and it is important to follow them in the correct order (in your case Migration to 3.x, most answers related to migration were already answered in these guides.