Sorting and Filter not working for table when complex object used.

Post Reply
taurgo
Posts: 3
Joined: 25 Feb 2020, 21:04

24 Sep 2020, 18:00

I have a scenario where instead of using model in car.vin format, i have to use complex object eg - car.engine.type. Whenever i change the object model to car.engine.type the sorting and filter breaks. Am i missing anything here ?
Here is code snippet :-

<div class="ui-g">
<div class="ui-g-12">
<div class="card">
<div class="card-title">DataTable</div>
<p-table #dt [columns]="cols" styleClass="ui-table-cars" [value]="enhancedCars" [paginator]="true" [rows]="10" dataKey="vin" selectionMode="single" [(selection)]="selectedCar">
<ng-template pTemplate="caption">
DataTable
<div class="ui-table-globalfilter-container">
<input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:250px;">
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" [ngSwitch]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
<th style="width: 8em; text-align: center;">
<button pButton type="button" icon="ui-icon-settings"></button>
</th>
</tr>
<tr>
<th *ngFor="let col of columns" [ngSwitch]="col.field" style="padding: .5em;">
<input *ngSwitchCase="'vin'" pInputText type="text" placeholder="Starts with" class="ui-column-filter" style="width: 100%; margin-top: 0;" (input)="dt.filter($event.target.value, col.field, 'startsWith')">
<input *ngSwitchCase="'year'" pInputText type="text" placeholder="Contains" class="ui-column-filter" style="width: 100%; margin-top: 0;" (input)="dt.filter($event.target.value, col.field, 'contains')">
<p-dropdown *ngSwitchCase="'brand'" appendTo="body" [options]="brands" styleClass="ui-column-filter" [showClear]="true" [style]="{'min-width':'1em', 'width':'100%', 'margin-top':'0'}" placeholder="Select a Brand" (onChange)="dt.filter($event.value, col.field, 'equals')">
<ng-template let-item pTemplate="selectedItem">
<img src="assets/demo/images/car/{{item.label}}.gif" style="width:16px;vertical-align:middle" />
<span style="vertical-align:middle; margin-left: .5em">{{item.label}}</span>
</ng-template>
<ng-template let-car pTemplate="item">
<div class="ui-helper-clearfix" style="position: relative;height: 25px;">
<img src="assets/demo/images/car/{{car.label}}.gif" style="width:24px;position:absolute;top:1px;left:5px"/>
<div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
</div>
</ng-template>
</p-dropdown>
<p-multiSelect *ngSwitchCase="'color'" [options]="colors" [filter]="false" styleClass="ui-column-filter" [style]="{'width':'100%', 'margin-top':'0'}" defaultLabel="Select a color" (onChange)="dt.filter($event.value, col.field, 'in')"></p-multiSelect>
</th>
<th style="width: 8em;">
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData" [pEditableRow]="rowData">
<td>{{rowData.engine.type}}</td>
<td>{{rowData.year}}</td>
<td>
<img src="assets/demo/images/car/{{rowData.brand}}.gif" style="width: 50px; margin-right: 1em; vertical-align: middle;">
{{rowData.brand}}
</td>
<td>{{rowData.color}}</td>
<td>
<button pButton type="button" class="ui-button-success" icon="ui-icon-search" style="margin-right: .5em"></button>
<button pButton type="button" class="orange-btn" icon="ui-icon-edit"></button>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>

Model :-
export interface EnhanceCar {
engine:Engine;
vin;
year;
brand;
color;
}

export interface Engine {
type;
}

mert.sincan
Posts: 4345
Joined: 29 Jun 2013, 12:38

09 Oct 2020, 13:23

Hi,

Unfortunately, this is not related to Layout or Theme. Please use PrimeNg forum for it;
viewforum.php?f=35

Thanks a lot for your understanding!
Best Regards,

Post Reply

Return to “Sapphire - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest