Ngx-datatable: Cannot set property 'scrollTop' of undefined

[ashleahhill]

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

Current behavior
Error is thrown when you sort using a column header:

TypeError: Cannot set property 'scrollTop' of undefined
    at Scroller.setOffset (eval at 537 (1.chunk.js:160), <anonymous>:1702:38)
    at eval (eval at 537 (1.chunk.js:160), <anonymous>:1860:28)
    at SafeSubscriber.schedulerFn [as _next] (eval at <anonymous> (vendor.js:87), <anonymous>:6163:58)
    at SafeSubscriber.__tryOrUnsub (eval at <anonymous> (vendor.js:117), <anonymous>:223:16)
    at SafeSubscriber.next (eval at <anonymous> (vendor.js:117), <anonymous>:172:22)
    at Subscriber._next (eval at <anonymous> (vendor.js:117), <anonymous>:125:26)
    at Subscriber.next (eval at <anonymous> (vendor.js:117), <anonymous>:89:18)
    at EventEmitter.Subject.next (eval at <anonymous> (vendor.js:93), <anonymous>:55:25)
    at EventEmitter.emit (eval at <anonymous> (vendor.js:87), <anonymous>:6142:80)
    at StateService.nextSort (eval at 537 (1.chunk.js:160), <anonymous>:914:27)
    at DataTableHeaderCell.onSort (eval at 537 (1.chunk.js:160), <anonymous>:1277:24)
    at DebugAppView._View_DataTableHeaderCell1._handle_click_0_0 (DataTableHeaderCell.ngfactory.js:186)
    at eval (eval at <anonymous> (vendor.js:87), <anonymous>:9678:28)
    at eval (eval at <anonymous> (vendor.js:196), <anonymous>:1813:40)
    at eval (eval at <anonymous> (vendor.js:196), <anonymous>:1926:115)
    at ZoneDelegate.invoke (eval at 572 (polyfills.js:650), <anonymous>:203:28)
    at Object.onInvoke (eval at <anonymous> (vendor.js:87), <anonymous>:6220:41)
    at ZoneDelegate.invoke (eval at 572 (polyfills.js:650), <anonymous>:202:34)
    at Zone.runGuarded (eval at 572 (polyfills.js:650), <anonymous>:110:47)
    at NgZoneImpl.runInnerGuarded (eval at <anonymous> (vendor.js:87), <anonymous>:6249:82)
    at NgZone.runGuarded (eval at <anonymous> (vendor.js:87), <anonymous>:6482:77)
    at HTMLSpanElement.outsideHandler (eval at <anonymous> (vendor.js:196), <anonymous>:1926:83)
    at ZoneDelegate.invokeTask (eval at 572 (polyfills.js:650), <anonymous>:236:37)
    at Zone.runTask (eval at 572 (polyfills.js:650), <anonymous>:136:47)
    at HTMLSpanElement.ZoneTask.invoke (eval at 572 (polyfills.js:650), <anonymous>:304:33)

DebugContext {_view: _View_DataTableHeaderCell1, _nodeIndex: 0, _tplRow: 5, _tplCol: 8}
_nodeIndex
:
0
_staticNodeInfo
:
(...)
_tplCol
:
8
_tplRow
:
5
_view
:
_View_DataTableHeaderCell1
component
:
(...)
componentRenderElement
:
(...)
context
:
(...)
injector
:
(...)
providerTokens
:
(...)
references
:
(...)
renderNode
:
(...)
source
:
(...)
__proto__
:
Object

core.umd.js?e2a5:3427 EXCEPTION: Error in ./DataTableHeaderCell class DataTableHeaderCell - inline template:5:8 caused by: Cannot set property 'scrollTop' of undefined

Sort still operates

Expected behavior

Sort should happen without throwing error.

Reproduction of the problem
http://plnkr.co/edit/9Eug63qi775HVCMe3BhO?p=preview

1. On any tab, click a column header to sort.
2. See the error thrown in the console. (Error above was copied from local output, not plunker, so line references will be different)

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

I need sort to run without errors in my app

Please tell us about your environment:
Windows
VSCode
Node
Webpack Dev Server

• Table version: 0.7.x
  0.9.2
• Angular version: 2.0.x
  @angular/[email protected]
• Browser:
  Only tried in Chrome
• Language:

[email protected]

[ashleahhill]

As you can see from my plunker, I'm using the table with Angular Material2 and have run into another issue with tabs #183. However I saw this problem before I moved the table into the tabs as well.

[tscislo]

+1

[jh-code]

+1
I'm experiencing this as well.

[deeg]

I am also experiencing this.

It only seems to happen for me when a scroll is NOT enabled. It seems to be triggered from this line since parentElement is undefined in the case of a single page table with no scroller.

@amcdnl, would an appropriate solution just be to protect that call to check if this.parentElement is defined first? I can try to put out a PR for that if you think it is acceptable.

[horlescup]

+1

[amcdnl]

@deeg - Ya thats the right approach.

[amcdnl]

Fixed in 0.9.3