[grid][bug] - angular universal - NaN in output html

[earlyster]

I'm submitting a...

• Bug report

Current behavior

When I render grid in angular universal I receive NaN in the server side generated html. When the html is hydrated the css is corrected and there is a small flicker.

Expected behavior

Expected html to not contain NaN / invalid css output. No flicker when going from server side rendered html to hydrated html with js.

Minimal reproduction of the problem with instructions

1. http://plnkr.co/edit/UoagEQsiSmbC43mPkbbk?p=preview
2. Must run with angular universal starter project
   3. You will see error that looks like this in console running in nodejs server

What is the motivation or use case for changing the behavior?

No flickering of grid when Rendering initial first page of data on server in a virtualized grid. Attempting to render grid in under <400ms which can only be done with html pre rendered content.

Environment

Package versions:

test
├── @angular/animations@4.4.4
├── @angular/common@4.4.4
├── @angular/compiler@4.4.4
├── @angular/compiler-cli@4.4.4
├── @angular/core@4.4.4
├── @angular/forms@4.4.4
├── @angular/http@4.4.4
├── @angular/platform-browser@4.4.4
├── @angular/platform-browser-dynamic@4.4.4
├── @angular/platform-server@4.4.4
├── @angular/router@4.4.4
├── @ngtools/webpack@1.7.2
├── @nguniversal/express-engine@1.0.0-beta.3
├── @progress/kendo-angular-dateinputs@1.2.0
├── @progress/kendo-angular-dropdowns@1.2.1
├── @progress/kendo-angular-excel-export@1.0.4
├── @progress/kendo-angular-grid@1.4.2
├── @progress/kendo-angular-inputs@1.3.1
├── @progress/kendo-angular-intl@1.2.2
├── @progress/kendo-angular-l10n@1.0.4
├── @progress/kendo-data-query@1.0.7
├── @progress/kendo-drawing@1.4.0
├── @types/express@4.0.37
├── @types/node@8.0.32
├── bootstrap@4.0.0-beta
├── css-loader@0.28.7
├── css-to-string-loader@0.1.3
├── express@4.16.1
├── express-minify-html@0.11.4
├── file-loader@0.11.2
├── html-webpack-plugin@2.30.1
├── UNMET PEER DEPENDENCY jquery@>=3.0.0
├── memory-cache@0.2.0
├── ngx-bootstrap@1.9.3
├── node-sass@4.5.3
├── nodemon@1.12.1
├── UNMET PEER DEPENDENCY popper.js@^1.11.0
├── raw-loader@0.5.1
├── rimraf@2.6.2
├── rxjs@5.4.3
├── sass-loader@6.0.6
├── script-ext-html-webpack-plugin@1.8.5
├── serialize-javascript@1.4.0
├── style-loader@0.18.2
├── typescript@2.5.3
├── url-loader@0.5.9
├── webpack@3.6.0
├── webpack-merge@4.1.0
├── webpack-node-externals@1.6.0
├── xhr2@0.1.4
└── zone.js@0.8.18

Browser:

Not applicable for browsers happens with server

System:

• TypeScript version: XX <!-- run tsc --version --> Version 2.2.2
• Node version: XX <!-- run "node --version" and "npm --version"--> v6.9.5
• Platform: Mac

[rkonstantinov]

The flicker is due to setting the padding of the header to be equal to the scrollbar's width. Unfortunately, there is no way to measure the width of the browser's scrollbar during the server rendering. Thus, although we will stop outputting the NaN, this flicker cannot be avoided.

[ipeshev]

Fixed in 1.5.0-dev.201710041221

[earlyster]

I tried with latest dev build and appears to still be there

[earlyster]

Maybe we can determine scrollBarWidths based on referrer object it won't be perfect but could help have best css for server side render to avoid a flicker in most use cases. https://codepen.io/sambible/post/browser-scrollbar-widths

[ipeshev]

@earlyster we couldn't reproduce this faulty behavior with latest version ( dev and official), could you send us something to test it on our site.

[ipeshev]

We're closing this issue, @earlyster if you have any new information please reopen.