Ngx-datatable: Empty detail row

[cortopy]

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
I'm trying to replicate the demo for the detail row example. Everything works as it should (main rows display ok, I can toggle detail row, etc.)

Expected behavior
There would be some content in detail row, however it's empty.

Reproduction of the problem
I'm using the following HTML. It's exactly the same as per the demo, with the only difference that to make sure it works, I put just plain text.

    <ngx-datatable-row-detail>
      <template let-row="row" ngx-datatable-row-detail-template>
        <div style="padding-left:35px;">
          <h2>JUST PURE TEXT</h2>
        </div>
      </template>
    </ngx-datatable-row-detail>

Please tell us about your environment:
Fedora

• Table version: 0.7.x
  4.1.0

• Angular version: 2.0.x
  2.4.2

• Browser: all

• Language:
  Typescript 2.1.4

[cortopy]

I've just replicated this behaviour with the demo app.

Steps to reproduce:

• Clone repo
• npm install
• npm start

[aegyed91]

Got the same behavior. :/

Fix this asap pls

[astenuz]

I'm facing the same issue. The expanded event is correctly fired. Looking at the DataTableRowWrapperComponent, the container with the condition *ngIf="expanded" is rendered, but the template rowDetailTemplate is null. Thus, the condition *ngIf="rowDetailTemplate" is always false and nothing is rendered.

[astenuz]

I've found a temporary solution defining the ´DatatableRowDetailDirective´ yourself in the component you're defining the table and then passing it to the <ngx-datatable> tag.

In your component you'll have something along

@ViewChild(DatatableRowDetailDirective) rowDetail: DatatableRowDetailDirective;
template: TemplateRef<any>;
...
ngOnInit(){
    this.template = this.rowDetail.rowDetailTemplate;
  }

and in your component's template

<ngx-datatable
        #mydatatable
        ...
        [rowDetailTemplate]='template'
       ...

The bug seems to be caused because in the method set rowDetailTemplateChild(val: DatatableRowDetailDirective) of datatable.component.ts val.rowDetailTemplate is null. Not sure why. Perhaps because it hasn't been rendered yet and it is necessary to do it after ngOnInit()?

[astenuz]

It worked after i replaced the ngOnInit datatable component with

  ngOnInit(): void {
    // need to call this immediatly to size
    // if the table is hidden the visibility
    // listener will invoke this itself upon show
    this.recalculate();
    if(this.rowDetailTemplateChild)
      this.rowDetailTemplate = this.rowDetailTemplateChild.rowDetailTemplate;
  }

Seems like the val.rowDetailTemplate is not defined yet when set rowDetailTemplateChild(val: DatatableRowDetailDirective) is called.

[amcdnl]

Fixed in 5.0

[kuncevic]

Got in to that once updated the angular version up to 2.4.5 having ngx-datatable 4.0.0.

So the issue is fixed in ngx-datatable 5.0.0 as stated above.

But there some breaking changes you have to be aware of going from verson ngx-datatable 4 to version 5:

.ts
this.table.expandAllRows(); => this.table.rowDetail.expandAllRows();
this.table.toggleExpandRow(row);' => this.table.rowDetail.toggleExpandRow(row);

template:
ngx-datatable [detailRowHeight]="xxx" property moved to ngx-datatable-row-detail property as [rowHeight]="xxx"

I believe there is more breaking changes but these ones is the ones I get caught.

[amcdnl]

FYI -> These are documented in docs/changelog

[kuncevic]

@Amcdl I think I missed that going through he changelog but just looked up through the demo source code :)

[psreeks]

@astenuz @amcdnl @kuncevic is there a way to have all the rows expanded by default? expand all and collapse all are working as expected as shown in demo. But this triggers only on click event.