How to expand row from datatable programmatically

Question

I want to expand row directly from an typescript method, i\'ve try with @viewchild but it doesn\'t work :

HTML:

Answer 1

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

Answer 2

You can use this just for toggling purposes (please make sure you have defined [pSelectableRow]="rowData" in your template body.

<p-button label="Save" [pRowToggler]="rowData"></p-button>

If you needed something more customized, then you can, defined a reference called #dtEntry :-

<p-table #dtEntry [columns]="dataEntryColumns" [value]="data.rptSkMimp" 
            selectionMode="single" [paginator]="true" [rows]="10" dataKey="txnId">

Somewhere in your code - notice we are passing in (rowdata, dtEntry) above

<p-button icon="fa fa-fw fa-plus" label="Save" (click)="onRowSave(rowData, dtEntry)"></p-button>

You might have the following script in your code to handle onRowSave.

onRowSave(rowData:any, dt:any) {   
dt.toggleRow(rowData);   

}

Answer 3

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>

Answer 4

Try this:

addComment(): void {
    console.log(this.datatable);
    this.datatable.toggleRow(this.datatable.selection);
}

Answer 5

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>