How to add paging option for Angular Scheduler with multiple resources?
This knowledge base article explains the way to include pagination support in Schedule.
Step 1: Create an Angular Scheduler sample with resource option by referring the following online sample link.
https://ej2.syncfusion.com/angular/demos/#/material/schedule/timeline-resource-grouping
Also, include the actionComplete Scheduler client-side event as shown in the following code example.
<ejs-schedule id="schedule" #scheduleObj width='100%' height='650px' [selectedDate]="selectedDate" [currentView]="currentView" [group]="group" [eventSettings]="eventSettings" (actionComplete)="onActionComplete($event)"> <e-resources> <e-resource field='ProjectId' title='Choose Project' [dataSource]='projectDataSource' [allowMultiple]='allowMultiple' name='Projects' textField='text' idField='id' colorField='color' groupIDField='HospitalGroupId'> </e-resource> <e-resource field='TaskId' title='Category' [dataSource]='categoryDataSource' [allowMultiple]='allowMultiple' name='Categories' textField='text' idField='id' colorField='color' groupIDField='DoctorGroupId'> </e-resource> </e-resources> <e-views> <e-view option="TimelineDay"></e-view> <e-view option="TimelineWeek"></e-view> <e-view option="TimelineWorkWeek"></e-view> <e-view option="TimelineMonth"></e-view> <e-view option="Agenda"></e-view> </e-views> </ejs-schedule>
Step 2: Include the Pager control above the Scheduler by referring the following user guide link.
https://ej2.syncfusion.com/angular/documentation/pager/getting-started/
Also, include the click property as shown in the following code example.
<ejs-pager [pageSize]='1' [totalRecordsCount]='5' (click)="onSlide($event)"> </ejs-pager>
Step 3: In pageChange custom function, instead of rendering all the resources only the limited resources are assigned to Scheduler’s each page along with its events as shown in the following code example.
pageChange(page: string) {
const CurRoomData: Object[] = [];
const dm: DataManager = new DataManager({ json: this.eventData });
const dm1: DataManager = new DataManager({ json: this.categoryDataSource });
const groupFieldId = this.scheduleObj.resources[0].field;
const val: any = this.projectDataSource[parseInt(page as string, 10) - 1];
const CurResData: Object[] = dm1.executeLocal(new Query().where('DoctorGroupId', 'equal', val.id));
const curAppData: Object[] = dm.executeLocal(new Query().where(groupFieldId, 'equal', val.id));
CurRoomData.push(this.projectDataSource[val.id - 1]);
this.scheduleObj.resources[0].dataSource = CurRoomData;
this.scheduleObj.resources[1].dataSource = CurResData;
this.scheduleObj.eventSettings.dataSource = curAppData;
this.scheduleObj.dataBind();
}
Step 4: In Scheduler’s actionComplete event and Pager’s click functions, call the pageChange custom function to load the custom resources count on initial load and on each page click.
onActionComplete(args: ActionEventArgs): void {
if (!this.flag) {
const page: string = '1' as string;
this.pageChange(page);
}
}
onSlide(args: PageEventArgs): void {
const page: string = args.currentPage;
this.pageChange(page);
this.flag = true;
}
Step 5: Run the sample, Scheduler with Pager option at bottom will be displayed as shown below.
Figure 1: Scheduler with Pager option at bottom.
Please refer the example from the following GitHub link.
Example – Scheduler_with_Pager
