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
Child Rows. Child rows allow you to display additional row data in a collapsible section under each row. The child row visibility can be toggled using an additional control on the left hand side of the row, or programmatically.
After you create a DataTable and define its structure using columns and constraints, you can add new rows of data to the table. To add a new row, declare a new variable as type DataRow. A new DataRow object is returned when you call the NewRow method.
New rows can be added to a DataTable very easily using the row. add()DT API method. Simply call the API function with the data that is to be used for the new row (be it an array or object). Multiple rows can be added using the rows.
The maximum number of rows that a DataTable can store is 16,777,216.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With