afterInit: data is only displayed after a component change

Tags: #<Tag:0x00007f8b28ceac88>
#1

We had a very long loading time in our application. The cause was a null pointer exception for the hotRegister.getInstance. So that hotRegister.getInstance is not undefined, we now use afterInit. Now the data is no longer displayed. Only when we switch to another component and back, the data will appear.

Could you please help us further?

  @Input()
  set leadTimesInfo(leadTimesInfo: LeadTimesInfo[]) {
    this.leadTimesInfos = leadTimesInfo;
    ...
    this.hotSettings.afterInit = () => {
      this.hotRegisterer.getInstance(this.hotId).updateSettings(this.hotSettings);
   ...
     }
  ...
 this.hotData = this.extractData(leadTimesInfoMap, colHeaders, rowHeaders);
 }
#2

Hi @shillebrand

Can you please also share code of your settings and data objects?

#3

I have updated handsontable from version 8 to 11. Previously, the data could be displayed in version 8. Is there a way to check the hotInstance for undefined without throwing a null pointer exception? This would solve our display problem.
Currently I’ve built a try catch statement around it and everything is displayed without the long wait.

The code now looks like this:

 @Input()
  set leadTimesInfo(leadTimesInfo: LeadTimesInfo[]) {
    this.leadTimesInfos = leadTimesInfo;
    ...
   try {
      if (!isUndefinedOrNull(this.hotRegisterer.getInstance(this.hotId)) {
      this.hotRegisterer.getInstance(this.hotId).updateSettings(this.hotSettings);
      ...
      }
      catch (e) {
     // Null Pointer Exception is catched
      }
 this.hotData = this.extractData(leadTimesInfoMap, colHeaders, rowHeaders);
 }
#4

Hi @shillebrand

Unfortunately we don’t support Handsontable integration with Java so this issue is out of scope of our capabilities.

#5

Hi Adrian Szymanski,

we use the Angular Framework and TypeScript.

#6

Hi Adrian Szymanski,
the settings are very uncritical. I don’t think these are causing my problem.

#7

Hi @shillebrand

In version 11 we introduced modularization which is quite a big change. That might cause the issues while migrating from version 8. Here you can read more about it:

https://handsontable.com/docs/migration-from-10.0-to-11.0/#step-1-react-angular-vue-register-your-modules

#8

Hello Adrian Szymanski, thank you for your response. We already import all modules.
While debugging I noticed that the hotInstance is undefined. And when hotInstance.isDestroyed is called, a Null Pointer Exception is thrown.

class HotTableRegisterer {
        /**
         * @param {?} id
         * @return {?}
         */
        getInstance(id) {
            /** @type {?} */
            const hotInstance = instances.get(id);
            if (hotInstance.isDestroyed) {
                console.warn(HOT_DESTROYED_WARNING);
                return null;
            }
            return hotInstance;
        }
#9

Hi @shillebrand

I investigated your issue further with my colleague and we came to the this conclusion. It seems that when you are using the method getInstance(id) you are passing the wrong id and that causes an error.

The perfect solution would be to make sure that the passed id is correct instead of passing a random one and then getting an instance check if that id is indeed correct.

#10

Hello Adrian.

thank you for the tip with the id. The id is correct but is not yet registered. The input method is already called beforehand. Only later the id is registered. (I don’t know where and how the instance with the id is registered, because I do not have insights into handsontable code) I don’t quite understand how to register the id manually or how to register it automatically earlier. I found the registerInstance(id, instance) method. However, I don’t know where to get the second parameter from.

#11

Hi @shillebrand

Here’s a documentation entry about how you should refer to the instance in Angular: https://handsontable.com/docs/angular-hot-reference/