ngx-datatable detail row not expanding

无人久伴 提交于 2019-12-08 01:35:50

问题


I am attempting to create a ngx-datatable that I can reuse everywhere to keep styling and how editing, etc work.

Most everything works but I cannot figure out why I cannot get the details row to expand properly.

Here is the common table component html/template:

common-table.component.html

<div>
  <h3>Results</h3>
  <ngx-datatable 
    #myTable
    class="material expandable"
    [rows]="data"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [externalPaging]="hasServerPaging"
    [count]="tablePaging.count" 
    [offset]="tablePaging.offset" 
    [limit]="tablePaging.limit" 
    (page)='setPage($event)'>
    <ngx-datatable-row-detail *ngIf="hasDetails" [rowHeight]="rowDetailHeight" #myDetailRow [template]="rowDetails" (toggle)="onDetailToggle($event)">
    </ngx-datatable-row-detail>
  </ngx-datatable>

</div>

The parent component contains the definitions for the columns and templateRefs to pass around:

search-results.component.html

<ng-template #rowDropDownTemplate let-row="row" ngx-datatable-cell-template>
  <a [class.datatable-icon-right]="!row.$$expanded" [class.datatable-icon-down]="!row.$$expanded" title="Expand/Collapse Details"
    (click)="toggleExpandRow(row)">
        </a>
</ng-template>

<ng-template #rowDetailsTemplate let-row="row" ngx-datatable-row-detail-template>
  <div class="uk-grid">
    <div class="uk-width-1-2">
      left-side data
    </div>
    <div class="uk-width-1-2">
      right-side data
  </div>
</ng-template>

<app-common-table *ngIf="results && results.length > 0" 
  [tablePaging]="tablePaging" 
  [columns]="columns" 
  [data]="tableData" 
  [rowDetails]="rowDetailsTemplate" 
  [rowDetailHeight]="200"
  [hasServerPaging]="true" 
  (onPaging)="onPaging($event)">
</app-common-table>

Just for possible issues in the code, here is how the columns are being set: search-results.component.ts

private setColumns(): void {
    this._columns = [];

    let templateTest: TemplateRef<any>;

    let dropDownColumn: TableColumn = {
      width: 50,
      resizeable: false,
      sortable: false,
      draggable: false,
      canAutoResize: false,
      cellTemplate: this.rowDropDownTemplate,
    }
    this._columns.push(dropDownColumn);

    let nameColumn: TableColumn = {
      name: "Name",
      width: 120
    };
    this._columns.push(nameColumn);

    let positionsColumn: TableColumn = {
      name: "Positions",
      width: 200
    };
    this._columns.push(positionsColumn);

    let experienceColumn: TableColumn = {
      name: "Experience",
      width: 80
    };
    this._columns.push(experienceColumn);

    let leveleColumn: TableColumn = {
      name: "Level",
      width: 80
    };
    this._columns.push(leveleColumn);

    let educationeColumn: TableColumn = {
      name: "Education",
      width: 80
    };
    this._columns.push(educationeColumn);

  }

The data appears and so does the icon to expand the details row. Events fire and show the row data, but nothing is shown.

Any help would be greatly appreciated!!


回答1:


I suspect your toggleExpandRow method is wrong

I would do it like this:

app.common-table.ts

export class AppCommonTableComponent {
  @ViewChild('myTable') myTable: any;

parent.component.ts

@ViewChild(AppCommonTableComponent) commonTable: AppCommonTableComponent;

toggleExpandRow(row) {
  console.log('Toggled Expand Row!', row);
  this.commonTable.myTable.rowDetail.toggleExpandRow(row);
}

And you should fix your rowDropDownTemplate template. It should be

[class.datatable-icon-right]="!row.$$expanded" [class.datatable-icon-down]="row.$$expanded"

If you want to get the right classes

Plunker Example



来源:https://stackoverflow.com/questions/44104782/ngx-datatable-detail-row-not-expanding

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!