| layout | post |
|---|---|
| title | Paging with Grid widget for Syncfusion Essential JS |
| description | How to enable paging and its functionalites. |
| platform | js |
| control | Grid |
| documentation | ug |
| api | /api/js/ejgrid |
You can display the grid records in paged view, by setting allowPaging property as true.
The code snippet to enable paging is follows.
{% highlight html %} <ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true"> {% endhighlight %}
{% highlight javascript %} import {Component, ViewEncapsulation} from '@angular/core'; @Component({ selector: 'ej-app', templateUrl: 'app/app.component.html', //give the path file for Grid control html file. }) export class AppComponent { public gridData; constructor() { //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js' this.gridData = window.gridData; } } {% endhighlight %}
The following output is displayed as a result of the above code example.
You can pass the current page information as a query string while navigating to other page. To enable query string, set the enableQueryString property of pageSettings as true.
The following code example describes the above behavior.
{% highlight html %} <ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [pageSettings]="pageSettings"> {% endhighlight %}
{% highlight javascript %} import {Component, ViewEncapsulation} from '@angular/core'; @Component({ selector: 'ej-app', templateUrl: 'app/app.component.html', //give the path file for Grid control html file. }) export class AppComponent { public gridData; public pageSettings; constructor() { //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js' this.gridData = window.gridData; this.pageSettings = { enableQueryString: true }; } } {% endhighlight %}
The following output is displayed as a result of the above code example.
Apart from default pager, there is an option to render a specific custom template in a grid pager. To render template in pager, set enableTemplates as true and template properties of pageSettings.
Prevent to show the default pager while enabling the pager template by setting showDefaults property of pageSettings as false.
N> It's a standard way to enclose the template within the script tag with type as "text/x-jsrender".
The following code example describes the above behavior.
{% highlight html %} <ej-grid id="Grid" #Grid [dataSource]="gridData" [allowPaging]="true" [pageSettings]="pageSettings" (create)="onCreate($event)"> {% endhighlight %}
{% highlight css %} .e-grid .e-pager .e-pagercontainer { border-width: 0px; overflow: visible; } {% endhighlight %}
{% highlight javascript %}
import {Component, ViewEncapsulation} from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html', //give the path file for Grid control html file.
})
export class AppComponent {
@ViewChild('Grid') Grid: EJComponents<any, any>;
public gridData;
public pageSettings;
constructor()
{
//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.pageSettings = { enableTemplates: true, template: "#template", showDefaults: false };
}
}
onCreate(args:any){
Place the template inside index.html file {% highlight html %}
<script id="template" type="text/x-jsrender"> of 200 Go to </script>{% endhighlight %}
The following output is displayed as a result of the above code example.
There is an option to set the size of page by means selecting the pageSize you wish from the options available at the dropdown in pager. To render drop down in pager, provide the pageSize values you wish to display in drop down as array values to pageSizeList property of pageSettings.
The following code example describes the above behavior.
{% highlight html %} <ej-grid id="Grid" #Grid [dataSource]="gridData" [allowPaging]="true" [pageSettings]="pageSettings"> {% endhighlight %}
{% highlight javascript %} import {Component, ViewEncapsulation} from '@angular/core'; @Component({ selector: 'ej-app', templateUrl: 'app/app.component.html', //give the path file for Grid control html file. }) export class AppComponent { public gridData; public pageSettings; constructor() { //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js' this.gridData = window.gridData; this.pageSettings = { pageSize: 14, pageSizeList: [8,12,9,5] }; } } {% endhighlight %}
The following output is displayed as a result of the above code example.
