import {DataScroller} from 'primeng/primeng';
DataScroller requires a collection of items as its value, number of rows to load and a template to display each item. Template should contain a li element as a wrapper.
Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the datascroller. Cars are loaded by a CarService that connects to a server to fetch the cars with a Promise.
export interface Car {
vin;
year;
brand;
color;
}
import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Car} from '../domain/car';
@Injectable()
export class CarService {
constructor(private http: Http) {}
getCarsLarge() {
return this.http.get('/showcase/resources/data/cars-large.json')
.toPromise()
.then(res => <Car[]> res.json().data)
.then(data => { return data; });
}
}
Here is a sample DataScroller that displays a list of cars where each load event adds 10 more rows if available.
export class DataScrollertDemo implements OnInit {
cars: Car[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsLarge().then(cars => this.cars = cars);
}
}
<p-dataScroller [value]="cars" [rows]="10">
<template #car>
<li>
Car content
</li>
</template>
</p-dataScroller>
Header and Footer are the two sections aka facets that are capable of displaying custom content.
import {Header} from 'primeng/primeng';
import {Footer} from 'primeng/primeng';
<p-dataScroller [value]="cars" [rows]="10">
<header>List of Cars</header>
<footer>Choose from the list.</footer>
<template #car>
<li>
Car content
</li>
</template>
</p-dataScroller>
By default DataScroller listens to the scroll event of window, the alternative is the inline mode where container of the DataScroller element itself is used as the event target. Set inline option to true to enable this mode.
<p-dataScroller [value]="cars" [inline]="true" [rows]="10">
<template #car>
<li>
Car content
</li>
</template>
</p-dataScroller>
Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback everytime paging happens. To implement lazy loading, enable lazy attribute and provide a method callback using onLazyLoad that actually loads the data from a remote datasource. onLazyLoad gets an event object that contains information about what to load.
<p-dataScroller [value]="cars" [rows]="10" [lazy]="true" (onLazyLoad)="loadData($event)">
<template #car>
<li>
Car content
</li>
</template>
</p-dataScroller>
loadData(event) {
//event.first = First row offset
//event.rows = Number of rows per page
//add more records to the cars array
}
Name | Type | Default | Description |
---|---|---|---|
value | array | null | An array of objects to display. |
rows | number | null | Number of rows to fetch in a load event. |
inline | boolean | false | Defines if the event target to listen the scroll event is the element itself. |
scrollHeight | any | null | Max height of the content area in inline mode. |
loader | any | null | Reference of the target element whose click event loads the data instead of scrolling. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
Name | Parameters | Description |
---|---|---|
onLazyLoad | event.first = First row offset event.rows = Number of rows per page |
Callback to invoke in lazy mode to load new data. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-datascroller | Container element. |
ui-datascroller-header | Header section. |
ui-datascroller-footer | Footer section. |
ui-datascroller-content | Wrapper of item container. |
ui-datascroller-list | Item container element. |
Native component that requires css of PrimeUI DataScroller.
<p-dataScroller [value]="cars" [rows]="10" [buffer]="0.4">
<header>
Scroll Down to to Load More
</header>
<template #car>
<li style="border-bottom:1px solid #D5D5D5;">
<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-3" style="text-align:center"><i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
<div class="ui-grid-col-9">
<div class="ui-grid ui-grid-responsive ui-fluid">
<div class="ui-grid-row">
<div class="ui-grid-col-2">Vin: </div>
<div class="ui-grid-col-10">{{car.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Year: </div>
<div class="ui-grid-col-10">{{car.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Brand: </div>
<div class="ui-grid-col-10">{{car.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2">Color: </div>
<div class="ui-grid-col-10">{{car.color}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
</template>
</p-dataScroller>
<p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" width="225" (onAfterHide)="onDialogHide()">
<div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="selectedCar" style="font-size:16px;text-align:center;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-12" style="text-align:center"><img src="showcase/resources/demo/images/car/{{selectedCar.brand}}-big.gif"></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Vin: </div>
<div class="ui-grid-col-8">{{selectedCar.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Year: </div>
<div class="ui-grid-col-8">{{selectedCar.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Brand: </div>
<div class="ui-grid-col-8">{{selectedCar.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">Color: </div>
<div class="ui-grid-col-8">{{selectedCar.color}}</div>
</div>
</div>
</p-dialog>
export class DataScrollerDemo implements OnInit {
cars: Car[];
selectedCar: Car;
displayDialog: boolean;
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsMedium().then(cars => this.cars = cars);
}
selectCar(car: Car) {
this.selectedCar = car;
this.displayDialog = true;
}
onDialogHide() {
this.selectedCar = null;
}
}