DataScroller DataScroller displays data with on demand loading using scroll.
Scroll Down to to Load More
Vin:
{{selectedCar.vin}}
Year:
{{selectedCar.year}}
Brand:
{{selectedCar.brand}}
Color:
{{selectedCar.color}}

Import


import {DataScroller} from 'primeng/primeng';

Getting Started

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 let-car>
        <li>
            Car content
        </li>
    </template>
</p-dataScroller>

Facets

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 let-car>
        <li>
            Car content
        </li>
    </template>
</p-dataScroller>

Inline

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 let-car>
        <li>
            Car content
        </li>
    </template>
</p-dataScroller>

Lazy Loading

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 let-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
}

Attributes

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.

Events

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.

Styling

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.

Dependencies

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 let-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;
    }
}