Server-Side Scrolling example not working

I’m submitting a … (check one with “x”)

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior I’m trying to implement a list with server side infinite scrolling but the datatable is not notified when i add new rows. (like shown here: http://swimlane.github.io/ngx-datatable/#server-scrolling )

I decided to download your project and debug the demo site to have a better understanding at what i was doing wrong. But the demo site has the same bug.

I can’t figure out why it does that.

here’s an npm list of my project:

PS C:\Users\benja\Downloads\ngx-datatable-master> node -v
v8.9.3
PS C:\Users\benja\Downloads\ngx-datatable-master> npm -v
4.2.0
PS C:\Users\benja\Downloads\ngx-datatable-master> npm list --depth=0
@swimlane/ngx-datatable@11.1.7 C:\Users\benja\Downloads\ngx-datatable-master
+-- @angular/animations@4.4.6
+-- @angular/common@4.4.6
+-- @angular/compiler@4.4.6
+-- @angular/compiler-cli@4.4.6
+-- @angular/core@4.4.6
+-- @angular/platform-browser@4.4.6
+-- @angular/platform-browser-dynamic@4.4.6
+-- @angular/platform-server@4.4.6
+-- @types/jasmine@2.8.6
+-- @types/node@8.9.1
+-- angular2-template-loader@0.6.2
+-- autoprefixer@7.2.5
+-- awesome-typescript-loader@3.4.1
+-- clean-webpack-plugin@0.1.18
+-- copy-webpack-plugin@4.4.1
+-- core-js@2.5.3
+-- cpx@1.5.0
+-- cross-env@5.1.3
+-- css-loader@0.28.9
+-- extract-text-webpack-plugin@2.0.0-beta.4
+-- file-loader@0.11.2
+-- fs-extra@4.0.3
+-- gh-pages@1.1.0
+-- html-webpack-plugin@2.30.1
+-- istanbul-instrumenter-loader@3.0.0
+-- jasmine-core@2.99.1
+-- jasmine-spec-reporter@4.2.1
+-- karma@1.7.1
+-- karma-chrome-launcher@2.2.0
+-- karma-coverage@1.1.1
+-- karma-jasmine@1.1.1
+-- karma-mocha-reporter@2.2.5
+-- karma-remap-coverage@0.1.5
+-- karma-sourcemap-loader@0.3.7
+-- karma-webpack@2.0.9
+-- node-sass@4.7.2
+-- npm-run-all@4.1.2
+-- postcss@5.2.18
+-- postcss-loader@1.3.3
+-- protractor@5.3.0
+-- replace@0.3.0
+-- rimraf@2.6.2
+-- rxjs@5.5.6
+-- sass-loader@6.0.6
+-- source-map-loader@0.2.3
+-- style-loader@0.19.1
+-- to-string-loader@1.1.5
+-- ts-helpers@1.1.2
+-- ts-node@3.3.0
+-- tslint@5.9.1
+-- tslint-config-swimlane@3.0.4
+-- tslint-loader@3.5.3
+-- typescript@2.7.1
+-- uglify-js@3.3.10
+-- url-loader@0.6.2
+-- UNMET PEER DEPENDENCY webpack@3.10.0
+-- webpack-combine-loaders@2.0.3
+-- webpack-dev-server@2.11.1
+-- webpack-merge@4.1.1
+-- webpack-notifier@1.5.1
`-- zone.js@0.8.20

npm ERR! peer dep missing: webpack@^2.1.0-beta.19, required by extract-text-webpack-plugin@2.0.0-beta.4
PS C:\Users\benja\Downloads\ngx-datatable-master> npm start

Expected behavior

Reproduction of the problem download @swimlane/ngx-datatable@11.1.7 run npm install run npm start go to http://localhost:9999/#server-scrolling

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

Please tell us about your environment: Windows 10 VSCode 1.19.3 node v8.9.3 npm v4.2.0

• Table version: 0.8.x

• Angular version: 2.0.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Chrome Version 64.0.3282.140 (Build officiel) (64 bits)

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[dim87]

Had the same problem- infinite scrolling was not updating the table, a quick fix i had to apply:

constructor(private ngZone: NgZone) {}

private pushDataTableData(data: ROW_DATA_TYPE[]) { this.ngZone.run(() => { this.rows.push(…data); }); }

Running rows,push inside ngZone is the key point here.

Hope that helps 😃

[cob-luz]

@dim87 fantastic. this worked for me!