Grid & Pager

Question

Hi,

We are fetching the data from the server(page by page data is fetched) and showing in grid vew and pager control to allow pagination. However, when user is in page 2 and when we want to customize the number of items per page displayed, pager control(2 of 2 pages) is not getting refreshed. It should be 1 of 2 pages.

Balaji Sekar · Answer

Hi Supriya, 
 
Greetings from the Syncfusion support. 
 
By default Grid render the 12 records in each page while enable allowPaging as true it is default behavior. Based on your query we suspect that you want apply the custom page size in every pages. So, please share/ensure the following details to us that will help to validate further. 
 

Please ensure that you want to customize the page size in every pages while paging action.
You mentioned that data fetching in server end so, please share that databinding code using adaptor or external databinding details.
Share the Grid rendering full code.
Please share the page record count customization code.
Video demonstration of the mentioned problem.
 
Regards, 
Balaji Sekar

Supriya Sampath · Answer

<button  ejs-dropdownbutton [items]='items'
         iconCss="e-icons e-FT_Dropdown_Arrow" cssClass='e-caret-hide'
         (select)="getSelectedCount($event)">

</button><ejs-grid #grid id='grid'
          [dataSource]='jobs'
          [allowSelection]='true'
          [sortSettings]='sortOptions'
          [pageSettings]="pageOptions"
          [allowPaging]='true'
          [allowSorting]='true'
          [enableHover]='true'
          (rowSelecting)='onRowSelecting($event)'
          (rowSelected)="onRowSelected($event)"
          height='100%' width='99%'>
  <e-columns>
    <e-column field='jobDetails.jobName' width="150"  headerText="Project Name"
              clipMode='EllipsisWithTooltip'></e-column>
    <e-column field='jobDetails.workOrderNo' width="100"  headerText="WO"
              clipMode='EllipsisWithTooltip'></e-column>
    <e-column field='jobDetails.workType' width="130" headerText="Work Type"
              clipMode='EllipsisWithTooltip'></e-column>
    <e-column field='jobDetails.address.zone' width="80" headerText="Zone"
              clipMode='EllipsisWithTooltip'></e-column>
    <e-column field='jobDetails.address.userAddress' width="150"  headerText="Address"
              clipMode='EllipsisWithTooltip'></e-column>
      <e-column field='assignedDetails.isInvestigator.details.assignedTo.name' width="100" headerText="Investigator"
                clipMode='EllipsisWithTooltip'></e-column>
      <e-column field='assignedDetails.isCrewForeman.details.assignedTo.name' width="120"  headerText="Crew Foreman"
                clipMode='EllipsisWithTooltip'></e-column>
      <e-column field='date' headerText="Need by Date" width="110"
                clipMode='EllipsisWithTooltip'></e-column>
        <e-column field='jobDetails.jobStatus.displayName' width="110" headerText="Status"
                  clipMode='EllipsisWithTooltip'></e-column>
  </e-columns>
</ejs-grid>
<!--  pagination component-->
<ejs-pager #pager
           [pageCount]="10"
           [pageSize]="pageSize"
           [totalRecordsCount]="totalJobs"
           (click)="onclickOfPagination($event)"
           [currentPage]="page"></ejs-pager>

Balaji Sekar · Answer

Hi Supriya, 
 
Thanks for your update. 
 
We checked your query with provided the information but it is not enough to validate so, please share the below details to us that will help to validate further. 
 

Please share code definition of pager’s click event(onclickOnPagination).
Share the Grid’s dataSource(jobs) binding code definition.
Video demonstration of the mentioned problem.
If possible share replicated a sample.
 
Regards, 
Balaji Sekar

iRestore · Answer

onclickOfPagination(e: any) {
  if (e.name === 'click') {
    let param = {};
    if (this.customizedCount) {
      param['count'] = this.customizedCount;
    } else {
      param['count'] = this.count;
    }
    param['page'] = e.currentPage;
    this.bindJobs(param);
  }
}

bindJobs(param){
  param['role'] = this.selectedRole;
  param['status'] = this.status;
  param['date']  = this.selectedDuration;
  param['jobsCount'] = false;
  this.jobs = [];
  this.jobsListService.getJobs(param).subscribe((res: any) => {
    for (let data of res.jobs) {
      // const status = this.statusData.filter(status => status.Id == data.jobDetails.jobStatus.value);
      // data['status'] = status[0].name;
      data['date'] = moment(data.jobDetails.targetEndDate).format('MM/DD/YYYY');
      this.jobs.push(data);
    }
    if (this.grid) {
      this.grid.refresh();
    }
  });
}

Attachment: PagerIssue.mov_2e62dc99.zip

Balaji Sekar · Answer

Hi Supriya,  
  
We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. 

Please log in using the below link.     

https://www.syncfusion.com/account/login  
  
Regards,  
Balaji Sekar