CoreUI and EJ2 Angular Grid

Kelly Harrison

Asked On November 27, 2019 07:37 PM UTC

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!

Reply | Reply with quote

Kelly Harrison

Replied On 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)

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On 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.

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.

Reply | Reply with quote

Kelly Harrison

Replied On 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

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On 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.

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.

Reply | Reply with quote

Kelly Harrison

Replied On 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:

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
  }

Reply | Reply with quote

Kelly Harrison

Replied On 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!

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On 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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
149501	Nov 27,2019 07:37 PM UTC	Dec 5,2019 04:43 AM UTC	Angular - EJ 2	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US