I want to expand row directly from an typescript method, i've try with @viewchild but it doesn't work :
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 doesn't expand, if someone could tell me how to do the same thing that (onRowClick) event do but inside a typescript method, i will be grateful.
There is a property expandedRows that is an array of all current expanded rows. You should be able to add / remove your row to this list to toggle row expansion.
You will need to have:
<p-dataTable [expandableRows]="true" [expandedRows]="expandedItems"></p-dataTable>
and
expandedItems: Array<any> = new Array<any>();
// expand row
this.expandedItems.pop(this.gridData[rownumber]);
// hide row
this.expandedItems.push(this.gridData[rownumber]);
Simple plunker but you get the idea... https://plnkr.co/edit/Zra8UUMv4XQCv0lbRbMg?p=preview
There is a toggleRow method at the level of the data table that takes row data, passed as a parameter:
<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>
You can add another data table or view after last column like below 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>