Forums Home / Wijmo / General Discussion
Posted by: moritz.neugebauer on 15 July 2025, 9:40 am EST
moritz.neugebauer
Posted 15 July 2025, 9:40 am EST
Dear Mescius Team,
my task is to upgrade a legacy angular application to the latest version, including Wijmo Flexgrid.
The current wijmo version is 5.20203.748, Angular version is 15.
Is there a list of breaking changes that I need to be aware of?
Best regards
Moritz
vivek.pannu
Posted 16 July 2025, 2:41 am EST
Hi Moritz,
You can refer to the following link for information about the changes made in different Wijmo versions - https://developer.mescius.com/wijmo/releases
You’ll also find a ‘Changelog.txt’ file in the Wijmo’s zip file that is downloaded from our website - https://developer.mescius.com/wijmo/download
You can see all the breaking changes there and make adjustments to your project accordingly.
In case, you face any issues, please let us know.
Regards
moritz.neugebauer
Posted 16 July 2025, 8:14 am EST - Updated 16 July 2025, 9:28 am EST
Dear Vivek,
thank you for providing me the list of changes.
After upgrading Wijmo to 5.20251.40 in the angular app, I experience a bug that never occured before.
When navigating from one Angular component that uses a FlexGrid to another component that also uses Flexgrid there appears an error in the browser console: this._edtHdl is null
I also noticed that there are two different sort of errors depending on the app context:
To me it appears that this error appears in the leaving process of navigating
ERROR Error: Uncaught (in promise): TypeError: this._edtHdl is null
6575/xe</l.prototype.finishEditing@http://localhost:4200/main.js:1:419993
6575/xe</l.prototype.dispose@http://localhost:4200/main.js:1:408773
ngOnDestroy@http://localhost:4200/main.js:1:1290146And this error in the entering process of navigating:
ERROR TypeError: this._edtHdl is null
finishEditing main.js:23042
refresh main.js:22502
favoriteSubscription main.js:55454
__tryOrUnsub main.js:106737
next main.js:106699
_next main.js:106644
next main.js:106629
next main.js:106456
next main.js:106029
changeFavorite main.js:74002
updateAllFavorites main.js:74027
m0 main.js:55418Do you have any idea why this might happen? After briefly scanning the breaking changes of FlexGrid I did not see any chances that might be related to the EditHandler.
Best regards
Moritz
vivek.pannu
Posted 17 July 2025, 2:43 am EST
Hi Moritz,
We tried to replicate the issue on our end, but the issue is not replicable on our end. It might be possible that some other factors in your application might be causing this issue, could you please share a small sample in which the issue can be replicated, so that we can investigate the issue further and assist you accordingly?
Please refer to the attached sample in which we tried to replicate the issue. You can also modify the attached sample to replicate the issue and share it with us.
We are assuming that you have also upgraded your Angular version, so we tested the issue in Angular 19 with the latest Wijmo version. In case, if there is something we missed, please let us know.
Regards
moritz.neugebauer
Posted 1 August 2025, 2:26 am EST - Updated 1 August 2025, 2:29 am EST
Dear Vivek,
I was able to find out where in my code the error appears.
In one component where I use flexgrid I have a ngOnDestroy method where I call
if(this.flexdata) {
this.flexdata.dispose()
}when I remove the .dispose() line, that error disappears. Can you tell me more about .dispose()? Is this call even necessary?
The other error appears inside another component where we use Flexgrid. The error appears inside a subscription where we call this.flexdata.refresh(false)
ngAfterViewInit(): void {
this.favoritesSubscription = this.catalogueFavoritesService.catalogueFavorites$.subscribe(favorites => {
this.favoritCatalogues = favorites;
this.cdr.detectChanges();
if (this.flexdata) {
this.flexdata.refresh(false);
}
});
}I call this.flexdata.refresh() because I display a star icon on the first row cell when the user clicks on “Favor catalogue”. Without this.flexdata.refresh() the star icon is not rendered on the cell. The method inside the subscription gets called every time the user click on a button called “favor catalogue” (where catalogue is a row in the flexgrid). But it also gets called the first the the component is rendered. The error appears in both cases (first load and on every click).
In the compiled main.js the error appears in
l.prototype.finishEditing = function (r) {
return this._edtHdl.finishEditing(r)
},In this component, we don’t use any edit handler, the whole grid is basically readonly.
Best regards
Moritz
vivek.pannu
Posted 1 August 2025, 6:33 am EST
Hi Moritz,
Thank you for sharing your investigation details. I am able to replicate the issue after using ‘dispose’ method inside the ‘onDestroy’ hook. It seems like an unexpected behavior, so I have forwarded this issue to the engineering team for further investigation with internal tracking ID - WJM-36746.
I think the dispose method call would not be needed inside the ‘ngOnDestroy’, the grid is automatically disposed when the component is destroyed. However, I have asked the engineering team to confirm the same.
I will update you when I get some updates from the engineering team on the same. For now, as a workaround, you can override the ‘finishEditing’ method of the Flexgrid like this -
let oldFun = wjGrid.FlexGrid.prototype.finishEditing;
wjGrid.FlexGrid.prototype.finishEditing = function(e) {
if(!this._edtHdl) return false;
return oldFun.call(this, e);
}Please refer to the attached sample for the same. It should work in both the scenarios you mentioned, as the error message was the same in both. However, if you still face this issue, please let me know.
Regards
grid-sample-updated.zip
moritz.neugebauer
Posted 1 August 2025, 8:25 am EST
Dear Vivek,
thank you very much for investigating deeper into this issue. We will override the function in the meantime and hope for a fix in the next Wijmo version.
Best regards
Moritz
