Grid column visibility binding causes exception - Cannot convert undefined or null to object

Question

When using the grid column visibility binding :

An exception is raised if this binding value changes after the initial render and the column is using a template.Exception sourced to: ej2-angular-ui-components/component-base.ts at master · syncfusion/ej2-angular-ui-components (github.com) lined 274:if (Object.keys(curChild.properties).length !== 0)https://github.com/syncfusion/ej2-angular-ui-components/commit/00c932a8b4e1a35cbc3994759ace8991c21a2cdf#r48826187Where curChild.properties is undefined.See detailed replication:https://stackblitz.com/edit/syncfusion-ej2-angular-gc6bwe?devtoolsheight=33&file=src/app/app.component.tsI believe this is a regression as this functionality previously worked.

Rajapandi Ravi · Accepted Answer

Hi Jeremy, 

Based on your query we modified the sample and achieved your requirement by using rxjs. We suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 





 
ngOnInit() { 
    Observable.defer(async () => { 
      (this as any).showRankingColumn = await this.promiseDelay(true, 500); 
      (this as any).showLocationColumn = await this.promiseDelay(true, 500); 
    }).subscribe(x => { 
      setTimeout(() => { 
        var grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0]; 
        grid.refreshColumns(); //call refresh columns for UI changes 
      }); 
       
    } 
    ); 
  } 
 

Sample: https://stackblitz.com/edit/angular-hu4pqz?file=app.component.ts 

Screenshot: 

  

Regards,Rajapandi R

Rajapandi Ravi · Answer

Hi Jeremy, 

Greetings from syncfusion support 

We have analyzed your query and we found that you are defining async function in ngOnInit. By validating this scenario, we found that defining async in ngOnInit is not the correct way and it causes some issues. From validating your query, we could see that you like to change the Boolean variable as true in the initial rendering and update the column visible property as true.  

So, you can achieve your requirement by using load event of Grid. Please refer the below code example and sample for more information. 






load() { //load event of Grid 
    (this.showRankingColumn as any) = true; 
    (this.showLocationColumn as any) = true; 
    console.log("Ranking Column Visible", this.showRankingColumn); 
    console.log("Location Column Visible", this.showLocationColumn); 
  } 



Sample: https://stackblitz.com/edit/angular-2jcbij-rfwjbj?file=app.component.ts 

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#load 

If it does not meet your requirement, please share the below details that will be helpful for us to provide better solution. 

1)      Please share us your exact requirement scenario with detailed description. 

2)      Please share the reason about why you are defining the async function in ngonInit. 

Regards, 
Rajapandi R

Jeremy Carter · Answer

Version v18.4.49 broke the usage of async ngOnInit. Currently using v18.4.46 and everything works correctly.

I can modify the code to not use async on the ngOnInit, but it is allowable syntax so I assumed it should work.

Rajapandi Ravi · Answer

Hi Jeremy, 

We have analyzed your query and we could see that you are using v18.4.46 and it works correctly at your end. We have checked your shared stackblitz sample with the v18.4.46 but we are able to reproduce the same script error with this v18.4.46. Please refer the below sample for more information. 

Sample: https://stackblitz.com/edit/syncfusion-ej2-angular-fjxdvh?file=package.json 

Before we start providing solution on your query, we need some information for our clarification. So please share the below details that would be helpful for us to provide better solution. 

1)     Please share us your working sample with the v18.4.46. 

Regards, Rajapandi R

Jeremy Carter · Answer

In your example you can clearly see the exception occurring.

Jeremy Carter · Answer

I am happy with the solution to remove my async ngOnInit method in favor of rxjs.