DataTable - Row Expansion can't disable expander for certain rows

[pserafin]

Hi,
firstI'll paste my code 4 grid:

<p-dataTable [value]="listData" [totalRecords]="length" [rows]="10" [paginator]="true" [responsive]="true" [pageLinks]="6" [rowsPerPageOptions]="[5,10,20]" expandableRows="true">
    <p-column expander="false" styleClass="col-icon" field="HasAnnexes"></p-column>
    <template let-row>
        <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px" *ngIf="row.HasAnnexes">
            <div class="ui-grid-row">
                <div class="ui-grid-row">
                    <div class="ui-grid-col-2 label">Vin: </div>
                    <div class="ui-grid-col-10">{{row.SalesOrgName}}</div>
                </div>
            </div>
        </div>
    </template>
    <p-column field="SalesOrgName" header="{{'ORG_UNIT' | translate}}" [sortable]="true" [filter]="false" styleClass="col-salesOrg"></p-column>
    <p-column field="Name" header="{{'AGREEMENT_NO' | translate}}" [sortable]="true" [filter]="false"></p-column>
    <p-column field="TypeName" header="{{'AGREEMENT_TYPE' | translate}}" [sortable]="true" [filter]="false"></p-column>
    <p-column field="IsActual" header="{{'IS_ACTUAL' | translate}}" [sortable]="true" [filter]="false" styleClass="colLX-icon">
        <template let-row="rowData">
            <input type="checkbox" checked="checked" disabled *ngIf="row.IsActual" />
            <input type="checkbox" disabled *ngIf="!row.IsActual" />
        </template>
    </p-column>
</p-dataTable>

I have to major issues with this grid:

1. Property<p-column expander="" doesnt read value - doesnt matter if I set it to true or false => expander will always be enable
2. This issue is associated with the 1st one. Some rows from my grid have details and some others dont. So i need to disable row expander for those rows which has ie flag "HasDetails=0"

[ed-khalid]

I have the same problem. Were you able to figure out a solution?

[pserafin]

Unfortunately, no response from prime team.... have workaround only(here im selecting grid by class name .orln-agree-tbl)

private hideExpanderWithTimer() {
//FIX: #729
var veryUglyWay = setTimeout(() => {
if ($('span.ui-cell-data').length > 0) {
$('p-dataTable.orln-agree-tbl').find('span.show-expander').each(function (i, v) {
var val = $(v).text();
if (val == 'false') { $(v).parent().parent().find('div.ui-row-toggler').hide(); }
});
clearTimeout(veryUglyWay);
}
}, 20);
}

[seidme]

Try this:
<p-column [expander]="false" field="HasAnnexes"></p-column>

[xuanshenbo]

Here is a not-so-ugly workaround, using the rowStyleClass attribute of p-dataTable:

<p-dataTable [value]="listData" [totalRecords]="length" [rows]="10" [paginator]="true" 
[responsive]="true" [pageLinks]="6" [rowsPerPageOptions]="[5,10,20]" expandableRows="true"
[rowStyleClass]="rowClass">

In your component.ts:

rowClass(rowData) {
  return rowData.HasAnnexes ? '' : 'noExpander';
}

In your css:

.noExpander span.ui-row-toggler {
  display: none;
}

The rowClass attribute of p-dataTable takes a function that gets the row data and row index as parameters and returns a style class for the row. In this case, it uses the noExpander css class if the certain row HasAnnexes, otherwise do not use any css class.

[pserafin]

xuanshenbo tank Yoo 4 your solution. It looks sexy, but not working 4 me. Somehow rowStyleClass functions isnt called in my case. Dont know why - maybe its caused by lazyloading or some attribute (there was bug reported involved scrollable attribute #1613).
I tried to remove all optional attribs but still - rowClass isnt called at all.
I tried same with "primeng": "2.0.5" but no effect.

[pserafin]

OK after restoring packages with npm Yours sholution works perfectly. Once again thanks xuanshenbo

[karthiks3000]

For anyone still looking for an alternative to the above solution (since that did not work for me), here is what i did-

<p-column [style]="{'width':'1px'}" > <ng-template let-row="rowData" pTemplate="body"> <a *ngIf="row.associated_episodes.length > 0" (click)="dtSeasons.toggleRow(row)"> <i *ngIf="!dtSeasons.isRowExpanded(row)" class="fa fa-chevron-circle-right"></i> <i *ngIf="dtSeasons.isRowExpanded(row)" class="fa fa-chevron-circle-down"></i> </a> </ng-template> </p-column>

dtSeasons here is the unique id of the datatable

<p-dataTable #dtSeasons>

[rajibpal]

@pserafin I am also facing same problem. I want to hide that expender whene there is know data. So I tried ur approach but noExpender clas adding.

[rajibpal]

@karthiks3000 Hi! Ur method is working but Icon is hiding on mouseOver out. Its showing again when mouseover. Can u tell me how to resole that problem..