Quiero expandir la fila directamente desde un método mecanografiado, lo intenté con @viewchild pero no funciona:
HTML:
<p-dataTable [value]="array" [responsive]="true" expandableRows="true" #dt (onRowClick)="dt.toggleRow($event.data)"> <template let-test pTemplate="rowexpansion"> <div class="ui-grid ui-grid-responsive ui-fluid"> <div class="ui-grid-row"> Bouh ! </div> </div> </template> <p-column field="name" header="Vin"></p-column> <p-column field="company" header="Year"></p-column> </p-dataTable> <button class="btn" (click)="addComment()"> <p>add comment</p> </button>Mecanografiado:
import { DataTable } from 'primeng/components/datatable/datatable'; export class MyAwesomeComponent implements OnInit { @ViewChild('dt') datatable : DataTable; addComment(): void { console.log(this.datatable); this.datatable.toggleRow(1); }la fila no se expande, si alguien pudiera decirme cómo hacer lo mismo que el evento (onRowClick) pero dentro de un método mecanografiado, se lo agradecería.
Hay una propiedad expandedRows que es una matriz de todas las filas expandidas actuales. Debería poder agregar/eliminar su fila a esta lista para alternar la expansión de la fila.
Necesitarás tener:
<p-dataTable [expandableRows]="true" [expandedRows]="expandedItems"></p-dataTable>y
expandedItems: Array<any> = new Array<any>(); // expand row this.expandedItems.pop(this.gridData[rownumber]); // hide row this.expandedItems.push(this.gridData[rownumber]);Plunker simple pero entiendes la idea... https://plnkr.co/edit/Zra8UUMv4XQCv0lbRbMg?p=preview
Hay un método toggleRow en el nivel de la tabla de datos que toma datos de fila, pasados como parámetro:
<p-dataTable #dt [value]="cars" expandableRows="true" (onRowClick)="dt.toggleRow($event.data)"> <p-column field="year" header="Year"></p-column> <ng-template let-car pTemplate="rowexpansion"> expanded row {{ car.brand }} </ng-template> </p-dataTable>Puede agregar otra tabla de datos o ver después de la última columna como el siguiente código
<p-dataTable [value]="reviewPanels"> <p-column [style]="{'width':'35px'}" expander="true" ></p-column> <p-column ></p-column> <ng-template let-cp pTemplate="rowexpansion"> <p-dataTable [value]="cp.listreviewerlist" > <p-column></p-column> </p-dataTable> </ng-template> </p-dataTable>