Grid not being displayed and no warnings/errors in console

Do I need to downgrade angular for this Grid component to work?

I believe it's related to versioning. I've seen similar issues here in the forums, but I'm not sure how to fix it.

If I do need to downgrade angular, are there any guides? I tried it already and wasn't successful. For example, can I just downgrade angular-cli.. or do I need to do all of the @angular libs?

Just to make sure I can actually display syncfusion components in this new project, I tried a button and a card. The button and the card work. 

> ng version



> npm install


package.json

{
  "name""my-webapp",
  "version""0.0.0",
  "scripts": {
    "ng""ng",
    "start""ng serve",
    "build""ng build",
    "test""ng test",
    "e2e""ng e2e",
    "lint""eslint -c .eslintrc.js --ext .ts ./src",
    "postinstall""ngcc"
  },
  "private"true,
  "dependencies": {
    "@angular-eslint/template-parser""^1.2.0",
    "@angular/animations""^11.2.6",
    "@angular/cdk""^11.2.2",
    "@angular/common""^11.2.6",
    "@angular/compiler""^11.2.6",
    "@angular/core""^11.2.6",
    "@angular/flex-layout""^11.0.0-beta.33",
    "@angular/forms""^11.2.6",
    "@angular/material""^11.2.2",
    "@angular/platform-browser""^11.2.6",
    "@angular/platform-browser-dynamic""^11.2.6",
    "@angular/router""^11.2.6",
    "@swimlane/ngx-charts""^17.0.1",
    "@syncfusion/ej2-angular-buttons""^18.4.46",
    "@syncfusion/ej2-angular-calendars""^18.4.48",
    "@syncfusion/ej2-angular-charts""^18.4.48",
    "@syncfusion/ej2-angular-grids""^18.4.48",
    "@syncfusion/ej2-data""^18.4.46",
    "data-forge""^1.8.17",
    "rxjs""^6.6.6",
    "tslib""^2.1.0",
    "zone.js""^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular""^0.1102.2",
    "@angular-eslint/eslint-plugin""^1.2.0",
    "@angular-eslint/eslint-plugin-template""^1.2.0",
    "@angular/cli""^11.2.2",
    "@angular/compiler-cli""^11.2.6",
    "@angular/language-service""^11.2.6",
    "@types/jasmine""^3.6.4",
    "@types/jasminewd2""~2.0.3",
    "@types/node""^14.14.31",
    "@typescript-eslint/eslint-plugin""^4.15.2",
    "@typescript-eslint/parser""^4.15.2",
    "codelyzer""^6.0.1",
    "eslint""^7.20.0",
    "eslint-plugin-import""^2.22.1",
    "eslint-plugin-jsdoc""^32.2.0",
    "eslint-plugin-prefer-arrow""^1.2.3",
    "jasmine-core""^3.6.0",
    "jasmine-spec-reporter""^6.0.0",
    "karma""^6.1.1",
    "karma-chrome-launcher""^3.1.0",
    "karma-coverage-istanbul-reporter""^3.0.3",
    "karma-jasmine""^4.0.1",
    "karma-jasmine-html-reporter""^1.4.0",
    "protractor""^7.0.0",
    "ts-node""^9.1.1",
    "typescript""^4.0.7"
  }
}


4 Replies 1 reply marked as answer

JA Jason March 21, 2021 07:21 PM UTC

I went through and downgraded everything.. still no show on the grid component.

{
  "name""project-controls-webapp",
  "version""0.0.0",
  "scripts": {
    "ng""ng",
    "start""ng serve",
    "build""ng build",
    "test""ng test",
    "e2e""ng e2e",
    "lint""eslint -c .eslintrc.js --ext .ts ./src",
    "postinstall""ngcc"
  },
  "private"true,
  "dependencies": {
    "@angular-eslint/template-parser""^1.2.0",
    "@angular/animations""^11.1.1",
    "@angular/cdk""^11.2.2",
    "@angular/cli""^11.1.1",
    "@angular/common""^11.1.1",
    "@angular/compiler""^11.1.1",
    "@angular/compiler-cli""^11.1.1",
    "@angular/core""^11.1.1",
    "@angular/flex-layout""^11.0.0-beta.33",
    "@angular/forms""^11.1.1",
    "@angular/material""^11.2.2",
    "@angular/platform-browser""^11.1.1",
    "@angular/platform-browser-dynamic""^11.1.1",
    "@angular/router""^11.1.1",
    "@swimlane/ngx-charts""^17.0.1",
    "@syncfusion/ej2-angular-buttons""^18.4.46",
    "@syncfusion/ej2-angular-calendars""^18.4.48",
    "@syncfusion/ej2-angular-charts""^18.4.48",
    "@syncfusion/ej2-angular-grids""^18.4.48",
    "@syncfusion/ej2-data""^18.4.46",
    "data-forge""^1.8.17",
    "rxjs""^6.6.6",
    "tslib""^2.1.0",
    "zone.js""^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular""^0.1102.2",
    "@angular-eslint/eslint-plugin""^1.2.0",
    "@angular-eslint/eslint-plugin-template""^1.2.0",
    "@angular/language-service""^11.2.6",
    "@types/jasmine""^3.6.4",
    "@types/jasminewd2""~2.0.3",
    "@types/node""^14.14.31",
    "@typescript-eslint/eslint-plugin""^4.15.2",
    "@typescript-eslint/parser""^4.15.2",
    "codelyzer""^6.0.1",
    "eslint""^7.20.0",
    "eslint-plugin-import""^2.22.1",
    "eslint-plugin-jsdoc""^32.2.0",
    "eslint-plugin-prefer-arrow""^1.2.3",
    "jasmine-core""^3.6.0",
    "jasmine-spec-reporter""^6.0.0",
    "karma""^6.1.1",
    "karma-chrome-launcher""^3.1.0",
    "karma-coverage-istanbul-reporter""^3.0.3",
    "karma-jasmine""^4.0.1",
    "karma-jasmine-html-reporter""^1.4.0",
    "protractor""^7.0.0",
    "ts-node""^9.1.1",
    "typescript""^4.0.7"
  }
}



RS Rajapandiyan Settu Syncfusion Team March 23, 2021 01:15 PM UTC

Hi Jason, 

Thanks for contacting Syncfusion support. 

Query: If I do need to downgrade angular, are there any guides? I tried it already and wasn't successful. For example, can I just downgrade angular-cli.. or do I need to do all of the @angular libs? 
 
Please find the below common links which illustrates how to downgrade the angular version in the project. 


Find the below sample for your reference. 


Still, if you face the same issue, please share the below details to validate further. 

  1. Share the replication procedure and video demo of the reported issue.
  2. Did you faced any console error while rendering the Grid? If yes, share the error details with us.

Regards, 
Rajapandiyan S 



JA Jason March 23, 2021 02:35 PM UTC

The problem was on my end. I was migrating to syncfusion from ngx-charts and the GridModule was being imported from the wrong library.

Marked as answer

RS Rajapandiyan Settu Syncfusion Team March 24, 2021 05:43 AM UTC

Hi Jason, 

We are glad that you have resolved the reported problem. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rajapandiyan S 


Loader.
Up arrow icon