We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Pager component is not working as per our requirement.

Thread ID:

Created:

Updated:

Platform:

Replies:

143187 Mar 8,2019 05:09 AM UTC Mar 8,2019 05:56 AM UTC Angular - EJ 2 1
loading
Tags: Grid
Santhosh Kumar
Asked On March 8, 2019 05:09 AM UTC

I am trying to display the items based on the page change events.
Please see below stackblitz address.


In app.component.html i have mentioned [pageSizes]="true" but drop down is not displaying

Current Behaviour.
1. able to display the pager component on top and it is changing the number of pages by changing the [pageSize]= "5" value.

Expected Behaviour.
1. I want to display the drop down but not with <ejs-dropdownlist> instead i want to display using [pageSizes]="true".
2. It should  display the number of items(in <div> tag) per page as per the drop down value changing dynamically.
Example: If number of items is 50 and [pageSizse] is 10 then it should display the 5 pages in the pager component and per page it should display the 10 items. 
Instead of 10 items per page,  i would like to change the items per page using dropdown so the correponding pages should change in the pager component.


Madhu Sudhanan P [Syncfusion]
Replied On March 8, 2019 05:56 AM UTC

Hi Santhosh, 

Thanks for contacting Syncfusion support. 

To show page size dropdown, we need to inject the PagerDropDown module as below in the app.component.ts file. Also we need to handle the dropDownChanged event to refresh the view based on the page size. 


<ejs-pager #pager [totalRecordsCount]="students.length"  
[currentPage]="currentPage" [pageSize]= "pageSize"  
[pageSizes]="true" (dropDownChanged)="changed($event)" (click)="click($event)"> 
... 
</ejs-pager> 


import { PagerComponent, Pager, PagerDropDown } from '@syncfusion/ej2-angular-grids'; 
Pager.Inject(PagerDropDown); 

export class AppComponent implements OnInit { 
  @ViewChild("pager") pager: PagerComponent; 
  pageSize: Object = 5; 
  currentPage: any = 1; 
 
  students: Object[] = 
    [ 
      .... 
    ]; 
 
  ngOnInit() { 
    this.studentView = this.students.slice(0, this.pageSize); 
  } 
 
  changed(e) { 
    this.pageSize = e.pageSize; 
    let start = (this.currentPage - 1) * e.pageSize; 
    this.studentView = this.students.slice(start, start + e.pageSize); 
  } 
    click(args) { 
    if (args.currentPage) { 
      let start = (args.currentPage - 1) * this.pageSize; 
      this.studentView = this.students.slice(start, start + this.pageSize); 
    } 
  } 
} 




Regards, 
Madhu Sudhanan P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;