We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

CoreUI and EJ2 Angular Grid

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!


7 Replies

KH Kelly Harrison November 27, 2019 07:42 PM UTC

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)


PS Pavithra Subramaniyam Syncfusion Team November 28, 2019 11:46 AM UTC

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. 
 

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. 



KH Kelly Harrison December 1, 2019 05:20 PM UTC

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


PS Pavithra Subramaniyam Syncfusion Team December 4, 2019 12:11 PM UTC

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. 
 

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

 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 



KH Kelly Harrison December 4, 2019 03:25 PM UTC

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:


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
}


KH Kelly Harrison December 4, 2019 03:53 PM UTC

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!


PS Pavithra Subramaniyam Syncfusion Team December 5, 2019 04:43 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon