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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

CoreUI and EJ2 Angular Grid

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
loading
Tags: 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!


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)

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. 
 

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

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. 
 

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. 


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:


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

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon