Angular ngx-datatable row-detail issues

7
votes

I'm having two issues with using row-detail in ngx-datatable.

  1. rowIndex is not working. I found a github issue describing the problem but it was supposedly fixed around v. 10.0.2 and I'm using 11.1.5 (the current version). Every row returns 0 for {{rowIndex}}. My workaround is to write out my own index to a column and then reference that, but I shouldn't have to do that. With the code below, every row goes into edit mode when I click one of them, because they all have the same rowIndex.

  2. I can't get the row-details rows to use the full-width of their 'parent' rows. I suspect it's because I'm using [columnMode]="'flex'" whereas the demo uses columnMode]="'force'". I can set a min-width, but I can't get width: 100% to work. Possibly because there's a div wrapper with no width

<ngx-datatable #dataTable class="material expandable" [rows]="rows" [limit]="50" [columnMode]="'flex'"
  [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [selectionType]="'single'" (select)="onSelect($event)"
  (activate)="onActivate($event)">
  <!-- Row Detail Template -->
  <ngx-datatable-row-detail [rowHeight]="50" #myDetailRow (toggle)="onDetailToggle($event)">
    <ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" let-expanded="expanded"
      ngx-datatable-row-detail-template>
      <span class="rowDetail" title="Click to edit" (click)="editing[rowIndex + '-name'] = true"
        *ngIf="!editing[rowIndex + '-name']"> {{row.name}} </span>
      <mat-form-field floatPlaceholder='never' *ngIf="editing[rowIndex + '-name']">
        <input matInput style="min-width:300px" (keyup.enter)="updateValue($event, 'name', rowIndex)" type="text"
          [value]="row.name" />
      </mat-form-field>
    </ng-template>
    ...
2
javascriptangularngx-datatable
/deep/ .datatable-row-detail{ width:250px !important; } – Davut Gürbüz

2 Answers

1
votes

Try adding below to your styles.scss or styles.css file. This will force the detail row to use 100% width. However, this is just a workaround and there has been no solution provided by the developer(s).

datatable-scroller { width: 100% !important; }

0
votes

Add below to "styles.scss" and add [columnMode]="'force'" to ng-template

<ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" let-expanded="expanded" [columnMode]="'force'" ngx-datatable-row-detail-template>

.datatable-scroller {width: 100% !important; }