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:

<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.

Showcase for another html example

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