Lazy DataTable Sort behaves strange

UI Components for Angular
Post Reply
CC84
Posts: 69
Joined: 11 Mar 2016, 09:32

22 Mar 2016, 11:05

I have a table :

Code: Select all

<p-dataTable *ngIf="ShowTable" [value]="List?.Value?.Items" [lazy]="true" [rows]="Rows"
               [paginator]="true" [totalRecords]="List?.Value?.TotalCount" (onLazyLoad)="OnLoadLazy($event)"
               selectionMode="single" (onRowSelect)="OnRowSelect($event)" sortField="Name" sortOrder="1">
    <p-column field="Id" header="Id" [filter]="true" [sortable]="true" style="width:70px"></p-column>
    <p-column field="Name" header="Name" [filter]="true" [sortable]="true"></p-column>
</p-dataTable>
In my initial LazyEvent i get the correct eventdata and set my ListValues to:

Code: Select all

{"Page":1,"PageSize":5,"TotalCount":10,
"Items":[
  {"Id":18,"Name":"adsfdsafdsafsadf"},
  {"Id":10,"Name":"asdf"},
  {"Id":11,"Name":"asdf"},
  {"Id":9,"Name":"blubbasdfsaasdf"},
  {"Id":1,"Name":"FirmaB"}
]}

But the Datatable changes this order to

  {"Id":1,"Name":"FirmaB"},
  {"Id":18,"Name":"adsfdsafdsafsadf"},
  {"Id":10,"Name":"asdf"},
  {"Id":11,"Name":"asdf"},
  {"Id":9,"Name":"blubbasdfsaasdf"}
WHY??????

When paging for and backward the sortorder is correct. Only the initial load shows this strange behavior.

cagatay.civici
Prime
Posts: 18467
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

22 Mar 2016, 22:11

I think this is a bug, DataTable does a default sort since you have sortField defined however, it should not do it for lazy datatable. As a result, order changes, in lazy mode it is up to you how to do page, sort, filter.

I've created;

https://github.com/primefaces/primeng/issues/133

daftster
Posts: 15
Joined: 24 May 2016, 22:20

27 May 2016, 22:54

Hi CC84,

Not to be rude, but can I ask how you did the lazy loading with http? I'm new in Angular and wanted to investigate how lazy loading works with in a real http scenario.

I have a subscription to listen for data:

this._theService.getData()
.subscribe(
dataObj => this.dataobj = dataobj,
error => this.errorMessage =<any>error);
}

and i'm trying to get the data through a service component by:
getData(): Observable<IData[]> {
return this._http.get(this._dataUrl)
.map((response: Response) => <IData[]>response.json())
//.do(data => console.log("All: " + JSON.stringify(data)))
.catch(this.handleError);
}

Thanks,

CC84
Posts: 69
Joined: 11 Mar 2016, 09:32

29 May 2016, 19:27

Well there are tutorials dealing with this, but none of them does it my way.

I've written some Observable encapsulation called AsyncResult, to simplify dealing with them.

It's a generic class, its constructor takes a observable and some handlers. The class contains properties for each state (isLoading, isFailed, isSucceeded) some properties for Errorhandling (statusCode, message) and the result (value).

In the constructor i subscribe to the observable:

observable.catch( resp => this.handleError( resp ) )
.map( resp => this.map( resp ) )
.subscribe( val => this.finished( val ) );

In the methodes i set the properties.

Additionaly for datatables i wrote a generic class containing all the neccessary infos for one request (totalCount, page, pageSize, items).

Hope this was helpful.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests