Ngx-datatable: Document rowHeight 'auto' value of DatatableRowDetailDirective

[Crevil]

I'm submitting a ... (check one with "x")

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

Current behavior
In the documentation, the rowHeight input is specified to be of type number indicating the height of the detail component DatatableRowDetailDirective

Expected behavior
Expected the type to be number  | 'auto' with information on the auto height option.

Reproduction of the problem
Set rowHeight to auto and it adjusts to the content height.

<ngx-datatable [rowHeight]="'auto'">
  <ngx-datatable-row-detail [rowHeight]="'auto'">
    <template let-row="row" ngx-datatable-row-detail-template>
      {{row.detail}}
    </template>
  </ngx-datatable-row-detail>
  <ngx-datatable-column name="ColumnName">
    <template let-row="row" ngx-datatable-cell-template>
      {{row.title}}
    </template>
  </ngx-datatable-column>
</ngx-datatable>

What is the motivation / use case for changing the behaviour?
Makes the possibility clear and the library more accessible.

Please tell us about your environment:

• OS: Mac OS X 10.12
• Editor: VS Code 1.9.1
• Package manager: npm
• Table version: 6.1.2
• Angular version: 2.4.7
• Browser: Chrome 56
• Language: TypeScript 2.1.6

[amcdnl]

Auto row height is not possible due to the ahead of time calculations for virtualization of dom. Sorry :(

[QuentinFchx]

@amcdnl What is the purpose of this then???? 😕

[eladcandroid]

Very sad..
Does anyone have a "manual" calculate (even with the DOM itself) for dynamic row details height that we can use for the method on "rowHeight" property?

[roberthelmick08]

@eladcandroid were you able to find a solution? I'm trying to solve this exact problem.

[h6784rfg6]

Put this into your scss

:host {
    /deep/ .datatable-row-detail {
        height: 100% !important;
        background-color: red !important;
    }
}

[Schmaga]

I am not sure if this is still an issue, but we solved it this way:
<ngx-datatable-row-detail [rowHeight]="'100%'">

A little similar to the scss workaround @h6784rfg6 mentioned, but we were trying to avoid /deep/ because it is deprecated and going to be removed.

[roberthelmick08]

Thanks @h6784rfg6 and @Schmaga

Another solution that worked for me was to emit an event to the parent component which recalculates the rowHeight property, however the user notices a slight delay when the event is emitted, so I will look into implementing one of the above solutions.

[stas4000]

h6784rfg6's and Schmaga's answers are both partially right. there is more you need to do to make responsive height work:

On the button that expands the add a click function that accepts the row and $event.
Mine looks like this:

<ng-template let-row="row" ngx-datatable-cell-template> <a href="javascript:void(0);" class="color-black fa" [ngClass]="{'fa-minus-square-o':row.$$expanded, 'fa-plus-square-o':!row.$$expanded}" title="View Details" (click)="toggleExpandRow(row,$event)"> </a> </ng-template>

If you got lost just notice the (click)="toggleExpandRow(row,$event)"

Then in your component.ts add the following:

toggleExpandRow(row,$event) { if(row.$$expanded){ this.expandRow($event); }else{ this.collapseRow($event); } this.table.rowDetail.toggleExpandRow(row); }

And this:

expandRow($event){ $event.toElement.closest('datatable-row-wrapper').className = ""; } collapseRow($event){ $event.toElement.closest('datatable-row-wrapper').className ="expanded"; }

Now should work

[mu7amed-abdelfata7]

Thanks @h6784rfg6 and @Schmaga

is working very good, but what about the width of this row if i want use 'ngx-datatable-row-detail' without [scrollbarV]="true".

I removed [scrollbarV]="true", the width of this row is inherited from 'datatable-scroller' element, and if overwrite the width of this element, it destroys all the screen.

[mp-dasglobtech]

I'm submitting a ... (check one with "x")

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

Current behavior
In the documentation, the rowHeight input is specified to be of type number indicating the height of the detail component DatatableRowDetailDirective

Expected behavior
Expected the type to be number  | 'auto' with information on the auto height option.

Reproduction of the problem
Set rowHeight to auto and it adjusts to the content height.

<ngx-datatable [rowHeight]="'auto'">
  <ngx-datatable-row-detail [rowHeight]="'auto'">
    <template let-row="row" ngx-datatable-row-detail-template>
      {{row.detail}}
    </template>
  </ngx-datatable-row-detail>
  <ngx-datatable-column name="ColumnName">
    <template let-row="row" ngx-datatable-cell-template>
      {{row.title}}
    </template>
  </ngx-datatable-column>
</ngx-datatable>

What is the motivation / use case for changing the behaviour?
Makes the possibility clear and the library more accessible.

Please tell us about your environment:

• OS: Mac OS X 10.12
• Editor: VS Code 1.9.1
• Package manager: npm
• Table version: 6.1.2
• Angular version: 2.4.7
• Browser: Chrome 56
• Language: TypeScript 2.1.6

This was helpful, thankyou.