Implementing Row Expander in VBCS

Summary

Not able to populate FlattenedTreeDataGridDataSource

Content

Implementing Row Expander in VBCS

I am trying to implement Row Expander with all rows expanded following https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=rowExpander&demo=dataGridRowExpanderExpandAll.
Somehow the FlattenedTreeDataGridDataSource is not getting populated though underlying JsonTreeDataSource seems to be populated correctly.
Below is the export from console log:

oj.FlattenedTreeDataGridDataSource {m_wrapped: oj.JsonTreeDataSource, m_options: {…}, data: undefined, _eventHandlers: Array(0), m_busy: false, …}
variable.js:249 [VB (FINER), /vb/stateManagement/variable]: Updating variable dataSource to oj.FlattenedTreeDataGridDataSource {m_wrapped: oj.JsonTreeDataSource, m_options: {…}, data: undefined, _eventHandlers: Array(0), m_busy: false, …}data: undefinedm_busy: falsem_cache: Array(0)length: 0__proto__: Array(0)m_columns: undefinedm_expandedKeys: []m_fetchSize: 25m_maxCount: 500m_options: {}m_rowHeader: undefinedm_wrapped: oj.JsonTreeDataSource {data: oj._JsonTreeNodeDataSource, _eventHandlers: Array(2)}_eventHandlers: (3) [{…}, {…}, {…}]__proto__: oj.FlattenedTreeDataSource
---------------------------------
actionChain.js:471 [VB (INFO), /vb/action/actionChain]: Chain setInitialTabSelection ending action step callComponentMethod1_wsyfyyro6 successfully (completed in 6 ms)
ojflattenedtreedatagriddatasource.js:326 Uncaught TypeError: Cannot read property 'length' of undefined
    at oj.FlattenedTreeDataGridDataSource.getCount (ojflattenedtreedatagriddatasource.js:326)