CODEWITHSUNDEEP
angulargridexpandablelistviewprimeng
john Smith
john Smith

Reputation: 1605

Angular 2 - PrimeNG - dataTable Expand one row at a time

In PrimeNG - is there any Way to allow only one row to be expanded at a time ? 

<p-dataTable [value]="cars" expandableRows="true">
        <p-column expander="true" styleClass="col-icon"></p-column>
         <p-column field="vin" header="Vin"></p-column>
        <ng-template let-car pTemplate="rowexpansion">
         ...
</p-dataTable>

Upvotes: 1

Views: 9964

Answers (4)

Will
Will

Reputation: 11

PrimeNG 7.1.1: set rowExpandMode attribute to 'single' will works.

<p-table #dt [columns]="cols" [value]="tableData" [rows]="pageOptions.perPage" [totalRecords]="totalRecords"[rowsPerPageOptions]="rowsPerPageOptions" [responsive]="true" rowExpandMode="single">

Upvotes: 1

Ramkumar
Ramkumar

Reputation: 456

Just try to use below <p-dataTable [value]="cars" rowExpandMode="single" expandableRows="true">

Add rowExpandMode="single" to open one row at a time.

Upvotes: 10

john Smith
john Smith

Reputation: 1605

Problem solved when I upgraded PrimeNG Grid to TurboTable vesion.. it's new since PrimeNG 5. instead of using

Upvotes: 0

DirtyMind
DirtyMind

Reputation: 2591

I can give you clue how to solve it and hope it will work for you.

It is not the actual solution for this issue but you will get Idea how to 
solve this. Also I am using javascript in the code. You can convert it into 
angular way.


<p-dataTable expandableRows="true"
   (onRowExpand) = "onRowExpand($event)">

onRowExpand(data : any) {
        var d = document.getElementsByClassName('fa fa-fw ui-c ui-row-toggler fa-chevron-circle-down');
        if (d.length > 0) {
            for (var i = 0; i < d.length; i++) {
                this.renderer.setElementStyle(d[i].parentElement.parentElement.parentElement.nextElementSibling,'display','none')
            }
        }
}

What i am doing here is fetching the class which is having 
fa-chevron-circle-down'. Then taking parent element recursively till the 
<tr>. Then take the next sibling element and you can delete it or you can do 
display none dynamically.

Upvotes: 0

Related Questions