No event is triggered when I change the page size from the page sizes dropdown (upstream bug)

[MirwaisAkrami]

I have written a custom backend, inspired by ODataService, which I need for a custom pagination scheme that I use with my backend service.
Everything works well, except for the pageSize change.
I want an event to be triggered when I change the page size from dropdown, but nothing happen.

Here are the gridOptions

this.gridOptions = {
			enableAutoResize: true,
			enableSorting: true,
			autoResize: {
				container: '#transfers-container',
				rightPadding: 10
			},
			checkboxSelector: {
				// you can toggle these 2 properties to show the "select all" checkbox in different location
				hideInFilterHeaderRow: false,
				hideInColumnTitleRow: true
			},
			compoundOperatorAltTexts: {
				// where '=' is any of the `OperatorString` type shown above
				text: { 'Custom': { operatorAlt: '%%', descAlt: 'SQL Like' } },
			},
			enableCellNavigation: true,
			enableFiltering: true,
			enableCheckboxSelector: true,
			enableRowSelection: true,
			enablePagination: true,
			pagination: {
				pageNumber: 1,
				pageSizes: [1, 2, 10, 20, 50, 100, 500, 50000],
				pageSize: this.defaultPageSize,
				totalItems: 0
			},
			presets: {
				pagination: { pageNumber: 1, pageSize: this.defaultPageSize }
			},
			backendServiceApi: {
				service: new CustomBackendService(),
				options: {
					enableCount: true, // add the count in the OData query, which will return a property named "__count" (v2) or "@odata.count" (v4)
					enableSelect: true,
					enableExpand: true,
				},
				onError: (error: Error) => {
					console.log('error occurred: ', error);
					this.errorStatus = error.message;
					this.displaySpinner(false, true);
				},
				preProcess: () => {
					this.errorStatus = '';
					this.displaySpinner(true);
				},
				process: (query) => this.getPagedTransfers(query),
				postProcess: (data) => {
					console.log('Post Process data: ', data);
					this.metrics = data.metrics;
					this.displaySpinner(false);
					this.getTransfersCallback(data);
				}
			}
		}

Here is the getTransfersCallback method

	getTransfersCallback(response: Result) {
		if (!response.isSuccess) {
			return
		}

		this.metrics.totalItemCount = response.data.totalElements;
		this.paginationOptions = { ...this.gridOptions.pagination, totalItems: response.data.totalElements } as Pagination;
		this.dataset = response.data.content;
		console.log('Pagination Options: ', this.paginationOptions);
		console.log('Grid Options: ', this.gridOptions);
		// console.log('Grid: ', this.grid.paginationService?.changeItemPerPage(10, true));
		
	}

and here is the HTML side

    <angular-slickgrid gridId="grid"
                       [columnDefinitions]="columns"
                       [gridOptions]="gridOptions"
                       [paginationOptions]="paginationOptions"
                       (onGridStateChanged)="gridStateChanged($event.detail)"
                       [dataset]="dataset"
                       (onPaginationChanged)="onPagingInfoChanged($event)"
                       (onBeforePaginationChange)="handleOnBeforePaginationChange($event)"
                       (onAngularGridCreated)="angularGridReady($event.detail)">
    </angular-slickgrid>

The versions are

Angular: 18
 "angular-slickgrid": "^8.4.0",

Thank you.

[zewa666]

have you tried onPagingInfoChanged?

[MirwaisAkrami]

Yes I did try that as well @zewa666

[zewa666]

in your example above I see only onBeforePaginationChange, onPaginationChanged, hence why I'm asking. In slickgrid universal that works perfectly though with onPagingInfoChanged

make sure you did the subscription properly. Check out this docs here https://ghiscoding.gitbook.io/angular-slickgrid/events/available-events#all-other-events

[MirwaisAkrami]

I have used those events as well as you mentioned, they are triggered when I change the page number but wont be triggered on pageSize change.

In this example from the official documentation, it works perfectly with OData Service, and they didn't even use the above mentioned events binding.
Slick grid with OData
Note: I reviewed the code for this demo by clicking the #code button in the top right of the demo screen, so it has to be the code of the demo right?

I have got another issue as well, that is I cannot render complex properties like user.firstName, it won't show the data.

[ghiscoding]

First of onPagingInfoChanged is a SlickEvent that is only useful for local (in-memory) DB, that won't do anything when using a Backend Service API.

Second, I didn't add separate events for everything, that would be way too many and the only available event with the Pagination Service is onBeforePaginationChange. You can see the list of available events directly from the docs Available Events.

In my custom Pagination Component, I'm calling the Pagination Service directly from simple bindings on the buttons and the dropdown, there's no reason to go crazy with creating a load of events that will never be used. So anyway, the bindings for the page size dropdown of Slickgrid-Universal is here and all the bindings are listed here. If you follow the call stack, it then goes and calls the Pagination Service .changeItemPerPage() which has a default argument of triggerChangeEvent = true, if you again follow the stack, it then goes to .processOnPageChanged() and because of triggerChangeEvent = true it calls the onBeforePaginationChange event and that's it, that is the only event being triggered. However please note that it's not a SlickEvent but rather a PubSub Event. I use 2 types of events in the project, SlickEvent are all the ones SlickGrid created but I prefer to use a PubSub Events because it's easier to subscribe, but even then the way to subscribe to them in Angular-Slickgrid UI (in the View) is the same. though it is different when subscribing within the component itself.

So we just have to look at the code to answer your question, and this is true for most projects. You might say that of course I know the project so I know it by heart, but the reality is that I did go in the code to answer your question, which anyone can do. 😉

[MirwaisAkrami]

Thank you for your response @ghiscoding.

I tried all the ways you suggested, and went through the code, but to no avail.
I then created a new application and tested it there, and it worked there.

The pageSize dropdown triggered the pagination event, so I don't know what may be the problem in my own project.

There are no fancy things going on, just a simple angular 17 project, but I think somehow the bound event is prevented to be triggered.

Can you think of any possible cause of this issue, as to why is the select option changed even been silenced.
worth to mention that the events from angular-slickgrid are working and fired, but this one just don't work.

Another issue that I mentioned earlier as well, is that I cannot render a complex object that is, if I want to show user.firstName, it wont work.

Thank you.

[ghiscoding]

I have no idea, I use a basic and custom Binding Service to bind event listeners. The reason I use a custom is mostly because I can keep track of what is bounded in an array and then use that array to .unbindAll() before destroying any component. The only thing that I could think of is to open the pagination component source file in your browser and add breakpoints to the bindings (all the bindings I mentioned above) and see if and why they wouldn't get binded properly.

Maybe another thing to note is that in Slickgrid-Universal, I'm not using any real Dependency Injection system. I created a very basic and custom Container Service that I extended in Angular-Slickgrid here. I never heard of anyone having problems with it, but who knows maybe the Binding Service isn't properly registered in the DI process!?!

[MirwaisAkrami]

Hi, I tracked down the issue and finally found the main cause.
The DropzoneModule from the package ngx-dropzone-wrapper.
When you import DropzoneModule to the SlickGridModule module, the pageSize dropdown change event won't get registered.

Please look into this repository and comment and uncomment the DropzoneModule in the TransfersModule, to see it in action.

[ghiscoding]

Sorry but I don't really have time to troubleshoot an issue that is caused by an external dependency and seems totally unrelated to my project. Why are you using this external dependency, can't you go without it? I'm sorry but since I'm not paid at all for this (that's the open source world), I don't see why I would spend time debugging external packages that seems unrelated to mine. It might be better to open an issue on their project instead since it's caused by that dependency (I have never used this dependency, I am not planning to use it either and my project works great without it, so...).

I'm not sure if it makes any difference and if it's even still needed but have you tried to install custom-event-polyfill?

Angular-Slickgrid/package.json

Line 104 in 204269e

"custom-event-polyfill": "^1.0.7",

I wouldn't be surprised that they're somehow overriding my Event/CustomEvent, it might depend on what global scope reach they have. hmm this library is about dragging, I wonder if it conflicts with SortableJS that I require in Slickgrid.

@zewa666 have ever heard and/or used this external package? any comments?

[ghiscoding]

@MirwaisAkrami hi there, I know it's been over 6 months but it turned out that @zewa666 also started using the same library and had the exact same problem. @zewa666 did manage to find a way to fix this issue for good in this Slickgrid-Universal PR and it will be available soon in the next version of Angular-Slickgrid (probably 8.12.2 or 8.13.0). The end result of the troubleshooting found that the external library ngx-dropzone-wrapper really caused the problem by adding some monkey patch code on top of the native JS events (that is a bad idea, they really shouldn't do that, but they actually do) and that caused a problem in here. So in the end, it was really confirmed to be an issue caused by the external dependency and we did manage (well, @zewa666 did) to add code to detect this monkey patch and avoid the problem that both of you had.

Someone should really open an issue on the ngx-dropzone-wrapper project to tell them that what they do is generally bad and should be avoided (I will not be the one to open an issue since I do not use that library).

Cheers