Je souhaite développer une ligne directement à partir d'une méthode TypeScript. J'ai essayé avec @viewchild mais cela ne fonctionne pas:
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>
TypeScript:
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);
}
row ne se développe pas, si quelqu'un pouvait me dire comment faire la même chose que l'événement (onRowClick), mais à l'intérieur d'une méthode TypeScript, je vous en serais reconnaissant.
Il existe une propriété expandedRows
qui est un tableau de toutes les lignes développées actuelles. Vous devriez pouvoir ajouter/supprimer votre rangée à cette liste pour basculer le développement de rangée.
Vous aurez besoin d'avoir:
<p-dataTable [expandableRows]="true" [expandedRows]="expandedItems"></p-dataTable>
et
expandedItems: Array<any> = new Array<any>();
// expand row
this.expandedItems.pop(this.gridData[rownumber]);
// hide row
this.expandedItems.Push(this.gridData[rownumber]);
Plunker simple mais vous avez l'idée ... https://plnkr.co/edit/Zra8UUMv4XQCv0lbRbMg?p=preview
Il existe une méthode toggleRow au niveau de la table de données qui prend les données de ligne, transmises en tant que paramètre:
<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>
Vous pouvez ajouter une autre table de données ou une autre vue après la dernière colonne, comme ci-dessous le code
<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>
Essaye ça:
addComment(): void {
console.log(this.datatable);
this.datatable.toggleRow(this.datatable.selection);
}
Vous pouvez l'utiliser uniquement à des fins de basculement (assurez-vous d'avoir défini [pSelectableRow] = "rowData" dans le corps de votre modèle.
<p-button label="Save" [pRowToggler]="rowData"></p-button>
Si vous avez besoin de quelque chose de plus personnalisé, vous pouvez alors définir une référence appelée #dtEntry: -
<p-table #dtEntry [columns]="dataEntryColumns" [value]="data.rptSkMimp"
selectionMode="single" [paginator]="true" [rows]="10" dataKey="txnId">
Quelque part dans votre code - remarquez que nous passons (rowdata, dtEntry) ci-dessus
<p-button icon="fa fa-fw fa-plus" label="Save" (click)="onRowSave(rowData, dtEntry)"></p-button>
Vous pourriez avoir le script suivant dans votre code pour gérer onRowSave.
onRowSave(rowData:any, dt:any) {
dt.toggleRow(rowData);
}