CoreUI and EJ2 Angular Grid

[Kelly Harrison]

Does anybody have experience using Syncfusion Angular Grid (EJ2) with CoreUI's Angular template?  I'm seeing some strange results, especially relating to how columns are defined and rendered.

In one instance, column definitions are being ignored completely.  The grid displays all the columns in the datasource even though I explicitly define only a few <e-column>'s.

In another instance the grid looks like it's got hundreds of columns.  Again I've defined only a few and the datasource certainly doesn't have hundreds of columns.

The code in both of these cases works without issue in a vanilla Angular CLI project.

I haven't posted any code b/c I don't really expect anybody to solve the issues... just looking to see if anybody has had similar experiences.

Thanks!

[Kelly Harrison]

One other thing I forgot to mention.  In the first case, I'm not getting any errors.  In the second, I get this:

TypeError: Cannot read property 'querySelector' of undefined

    at Render.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js.Render.emptyRow (render.js:255)

    at Render.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js.Render.renderEmptyRow (render.js:251)

    at Render.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js.Render.dataManagerFailure (render.js:429)

[Pavithra Subramaniyam]

Hi Kelly, 

 

Greetings from Syncfusion. 

 

Query: In one instance, column definitions are being ignored completely.  The grid displays all the columns in the datasource even though I explicitly define only a few <e-column>'s 

 

We have validated your query and check the reported problem at our end by preparing a sample with Angular with CoreUI. We could not reproduce the reported problem. Only the defined columns are rendered in Grid. Find the below sample for your reference. 

 

Sample: https://stackblitz.com/edit/angular-coreui-grid-pcxt5b?file=app/views/components/data/data.component.html  

Note: You can find the ejs-grid component in sidebar(UI ELEMENTS -> NG Components - > Data) 

 

If you are still facing the problem, could you please share the below details. It will be helpful t0 provide a better solution. 

 

• Details about how you are binding the columns to Grid?
• Share full grid code snippets.
• Share Essential Studio script version details.
• Share exact steps to reproduce the issue.

 

Regards, 

Pavithra S. 

[Kelly Harrison]

I'm uploading a zip based on your sample.  While it does work in Stackbiltz, I'm still getting the querySelector error when I run it locally.  I removed a couple of the extraneous pages under NG Components and added the necessary npm packages.

-k

Attachment: coreuiangular_bfcaafd3.zip

[Pavithra Subramaniyam]

Hi Kelly, 

 

Thanks for your update. 

 

Query: While it does work in Stackbiltz, I'm still getting the querySelector error when I run it locally.  I removed a couple of the extraneous pages under NG Components and added the necessary npm packages. 

 

We have validated your query and checked the reported problem at our end. You have enabled ivy mode in your angular projects which caused the reported problem. Custom decorators are not working properly using Ivy in angular 8. By default, custom decorators are called after the angular lifecycle hooks. Here the lifecycle hooks are not properly called. However, the angular version is not stable. Angular team already logged an issue related to this problem. Refer the below issue link. 

 

Issue link: https://github.com/angular/angular/issues/31495  

Once the angular team fixes the problem, the components will render properly. Also we suggest to use angular stable version 8.3.20. 

Help documentation: https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/ 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S. 

[Kelly Harrison]

I don't see how you say I've enabled Ivy.  In the zip I sent, it is specifically disabled.  Btw, this is from CoreUI's github repo - I haven't changed anything.  I just added the module from your sample.  Here's their repo:

https://github.com/coreui/coreui-angular

I've updated my app to use 8.3.20 with no success.  And here's the relevant portion of my tsconfig.app.json:

"angularCompilerOptions": {

"enableIvy": false

}

[Kelly Harrison]

Progress...

I went back to CoreUI Angular 2.6.3 which uses Angular 8.2.12 and it's working.  

I think there's something other than the Ivy issue going on in the latest CoreUI version since it's turned off (their release notes mention this specifically for backwards compatibility).  

However, since it's using Angular 9 rc0 (which I didn't realize) it's fair to say the culprit is something about that version of Angular.  

Thanks for pointing me in the right direction!

[Pavithra Subramaniyam]

Hi Kelly,  

Thanks for your update. 

We are glad to hear that you have found the cause of issue. 

Please contact us if you need any further assistance on Grid. As always, we will be happy to assist you.  

Regards,  

Pavithra S.