upgrading from V4.3 to 9 issues.

UI Components for Angular
Post Reply
bilpor
Posts: 3
Joined: 03 Mar 2020, 16:03

05 Mar 2020, 10:33

We have quite a bit of code in ts files, for 'priming' data before loading onto the screen.

In our original 4.3 code we have the following:

Code: Select all

import { DataTable, FilterMetadata, LazyLoadEvent } from 'primeng/primeng';
.....
this.dataTable.handleDataChange();
.....
this.dataTable.paginate();
now in v9 DataTable seems to have been dropped and the closest I can find is table:

Code: Select all

import { FilterMetadata, LazyLoadEvent } from 'primeng/primeng';
import { Table } from 'primeng/table';
import { FilterUtils } from 'primeng/utils';
So now handleDataChange() method has gone completely, and the closest I can find to paginate() is paginator(), but it's not the same. Can anybody point me in the right direction for replacing these.

PhilHuhn
Posts: 37
Joined: 19 Sep 2018, 02:52

16 Mar 2020, 20:47

I have lazy loading. My grid has 4 different filters, 3 of them are boolean values;

Code: Select all

	<!-- lazy -->
	<p-table #dt id='incidents-grid' [value]='incidents' [totalRecords]='totalRecords'
			expandableRows='true' dataKey='IncidentId' *ngIf='visible'
			[rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'
			[lazy]='true' (onLazyLoad)='loadIncidentsLazy($event)' [loading]='loading'>
		<ng-template pTemplate='caption'>
			<div class='ui-grid-row ui-inputgroup nsg-primary-color'>
				&nbsp;
				<label for='Mailed'>Mailed:&nbsp;</label>
				<input type='checkbox' id='mailed' name='mailed' [(ngModel)]='mailed' (change)="dt.filter($event.target.value, 'Mailed', 'equals')" />
				&nbsp; &nbsp;
				<label for='Closed'>Closed:&nbsp;</label>
				<input type='checkbox' id='closed' name='closed' [(ngModel)]='closed' (change)="dt.filter($event.target.value, 'Closed', 'equals')" />
				&nbsp; &nbsp;
				<label for='Special'>Special:&nbsp;</label>
				<input type='checkbox' id='special' name='special' [(ngModel)]='special' (change)="dt.filter($event.target.value, 'Special', 'equals')" />
				&nbsp; &nbsp;
				<div class='ui-inputgroup nsg-primary-color'>
					<div><label for='ServerName'>Server:&nbsp;</label></div>
					<a class='nsg-link-div' id='ServerName' (click)='onChangeServer( $event )'>{{user.Server.ServerName}} ({{user.Server.ServerShortName}})</a>
				</div>
			</div>
		</ng-template>
		...
	</p-table>
The grid's code:

Code: Select all

	//
	// event:
	// {first: 3, rows: 3, sortField: "AbuseEmailAddress", sortOrder: 1,
	// filters: }, globalFilter: null, multiSortMeta: undefined}
	// make a remote request to load data using state metadata from event
	// event.first = First row offset
	// event.rows = Number of rows per page
	// event.sortField = Field name to sort with
	// event.sortOrder = Sort order as number, 1 for asc and -1 for dec
	// filters: FilterMetadata object having field as key and filter value, filter matchMode as value
	//
	loadIncidentsLazy( event: LazyLoadEvent ) {
		setTimeout( ( ) => {
			this.loading = true;
			// manually apply filters, to force the filter.
			event.filters.ServerId = {
				value: this.user.Server.ServerId,
				matchMode: 'equals'
			};
			event.filters.Mailed = {
				value: this.mailed,
				matchMode: 'equals'
			};
			event.filters.Closed = {
				value: this.closed,
				matchMode: 'equals'
			};
			event.filters.Special = {
				value: this.special,
				matchMode: 'equals'
			};
			this._data.getIncidentsLazy( event ).subscribe((incidentPaginationData) => {
				this.loading = false;
				this.incidents = incidentPaginationData.incidents;
				this.totalRecords = incidentPaginationData.totalRecords;
			}, ( error ) => {
				this.loading = false;
				this.serviceErrorHandler(
					`${this.codeName}.loadIncidentsLazy getIncidentsLazy`, error );
			});
		}, 0 );
	}
My service's code:

Code: Select all

	// Read (get) page of Incidents, that are filtered and sorted.
	getIncidentsLazy( event: LazyLoadEvent ): Observable<IncidentPaginationData> {
		// /api/Incident?{"first":0,"rows":3,"filters":{"ServerId":{"value":1,"matchMode":"equals"}}}
		const urlPath: string = this.url + '?' + JSON.stringify( event );
		this._console.Information(
			`${this.codeName}.getIncidentsLazy: ${urlPath}` );
		return this.http.get<IncidentPaginationData>( urlPath )
			.pipe( catchError( this.handleError.bind(this) ) );
	}
What I send to the backend:

Code: Select all

import { Incident } from './incident';
import { LazyLoadEvent } from 'primeng/api';
//
export class IncidentPaginationData {
	public incidents: Incident[];
	//
	public loadEvent: LazyLoadEvent;
	//
	public totalRecords: number;
	//
	public message: string;
	//
}
My backend is an ASP.Net web API site. The library is here:
[https://github.com/PHuhn/NSG.PrimeNG][https://github.com/PHuhn/NSG.PrimeNG]

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests