Unable to render grid in Angular 8

[bensullivan]

Hi

Our front end team have been battling with trying to get a grid rendering in our Angular 8 codebase today. We havn't been having much joy.

Please find attached a copy of our codebase with most of the ng src ripped out except for the components needed to illustrate the problem. This ng src was based on what was in the ng 6 example bundled in the trial dist. I have also bundled the grid and resources directory from the trial zip into the project root and referenced from package.json. I have updated the angular.json with the themes style as per doco. Our app assets are still there in case this could be a CSS issue with brytum styles and ours.

The app compiles ok. At the moment, I can see a div with a cls of b-grid-body-container which sounds promising however there is no grid with rows displayed displayed.

Screen Shot 2019-10-03 at 16.18.54.png (772.99 KiB) Viewed 1116 times

There is also a JS error in the console:

AppComponent.html:5 ERROR TypeError: Cannot read property 'element' of undefined
    at _0x1163fb (grid.umd.js:30)
    at _0x5a2c48.renderRows (grid.umd.js:30)
    at _0x5a2c48.onPaint (grid.umd.js:16)
    at _0x5a2c48.callback (grid.umd.js:9)
    at _0x5a2c48.trigger (grid.umd.js:12)
    at _0x5a2c48.triggerPaint (grid.umd.js:12)
    at _0x5a2c48.render (grid.umd.js:12)
    at _0x5a2c48.render (grid.umd.js:16)
    at _0x3a5783.functionChainRunner (grid.umd.js:12)
    at _0x5a2c48._0x57b509.<computed> [as render] (grid.umd.js:12)

To reproduce, unzip attachment, cd into root of extracted folder, npm install and ng serve.

I could really use some help here - trying desperately to get this evaluation up and running!!

Thanks!

Ben

[sergey.maltsev]

Hi!

There are several issues with your code.

1. app-grid tag was closed in wrong place. And also don't use - in #appgrid
Should be like this:

template: '<app-grid #appgrid [columns]="columns" [data]="rows"></app-grid>'

2. Also if you could have problems with bryntum styling.
Add "preserveSymlinks": true flag to angular.json

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "preserveSymlinks": true,

3. Add styling to allow grid occupy the whole page to src/styles.scss

app-root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

app-grid div {
  flex: 1;
  height: 100%;
}

app-people-assignment-grid {
  flex: 1;
}

4. Few changes to simplify used templates.

You could just check attached zip.

[bensullivan]

Excellent! Thankyou so much!