popupOpen is not triggering after dynamic group and resource binding

[Hasnain Hanif]

PopupOpen is working fine when empty resource is binded but when i bind group to the resource "Resources" then popupOpen event is not triggering, there is no error on log as well. Other Calendar UI is fine only problem is PopupOpen is not triggering

//HTML

<ejs-schedule

#ejsSchedule

width="100%"

[showTimeIndicator]="showTimeIndicator"

[workHours]="workHours"

(dragStart)="onDragStart($event)"

(dragStop)="onDragStop($event)"

[eventSettings]="calendarService.eventSettings"

(actionComplete)="onActionComplete($event)"

(actionBegin)="onActionBegin($event)"

(eventRendered)="onEventRendered($event)"

(popupOpen)="onPopupOpen($event)"

(eventClick)="onEventClick($event)"

[cssClass]="ejsCellClass()"

(currentViewChange)="onViewChange($event)"

>

<e-views>

<e-view displayName="Month" option="Month">e-view>

<e-view dateFormat="E, d MMM yy " displayName="Week" option="Week">e-view>

<e-view dateFormat="E, d MMM yy " displayName="Day" option="Day">e-view>

<e-view

dateFormat="E, d MMM yy "

displayName="Agenda"

option="Agenda"

>e-view>

e-views>

<e-resources>

<e-resource

[field]="calendarService.resourceId"

name="Resources"

title="Name"

idField="id"

[dataSource]="calendarService.resourceViewDataSource"

textField="text"

>

e-resource>

e-resources>

ejs-schedule>

//.ts file

@ViewChild("ejsSchedule") ejsSchedule: Schedule;

  group: GroupModel = {

    byDate: true,

    resources: ["Resources"],

    enableCompactView: false,

  };

async ngAfterViewInit() {

this.calendarUtil = new CalendarUtil(

this.ejsSchedule,

this.calendarSettings

);

}

onViewChange(args) {

switch (args) {

case CalendarSettings.DefaultViewEnum.Month:

this.ejsSchedule.rowAutoHeight = false;

this.ejsSchedule.height = "90%";

this.ejsSchedule.group.resources = [];

break;

case CalendarSettings.DefaultViewEnum.Week:

case CalendarSettings.DefaultViewEnum.Day:

this.ejsSchedule.rowAutoHeight = true;

if (this.calendarSettings.resources_per_page == 0) {

this.ejsSchedule.group.resources = [];

} else {

this.ejsSchedule.group = this.group;

}

break;

default:

this.ejsSchedule.rowAutoHeight = true;

this.ejsSchedule.group = this.group;

break;

}

this.ejsSchedule.dataBind();

}

// calendar Util Class

export class CalendarUtil {

private ejsSchedule: Schedule;

private calendarSettings: CalendarSettings;

private group: GroupModel = {

byDate: true,

resources: ["Resources"],

enableCompactView: false,

};

constructor(

ejsSchedule: Schedule,

calendarSettings: CalendarSettings,

currentView?: View

) {

this.ejsSchedule = ejsSchedule;

this.calendarSettings = calendarSettings;

this.ejsSchedule.selectedDate = new Date();

this.ejsSchedule.currentView = currentView ?? calendarSettings.default_view;

this.initializeResource(this.ejsSchedule.currentView);

this.ejsSchedule.startHour = this.convertHours(

calendarSettings.calendar_start

);

this.ejsSchedule.endHour = this.convertHours(calendarSettings.calendar_end);

this.setTimeScale();

let setupSubscription = this.ejsSchedule.dataBinding.subscribe((args) => {

// currentViewDates are not available at the beginning need to wait for it to be available.

this.setWorkWeekDays();

setupSubscription.unsubscribe();

});

}

}

private initializeResource(args) {

switch (args) {

case CalendarSettings.DefaultViewEnum.Month:

this.ejsSchedule.rowAutoHeight = false;

this.ejsSchedule.height = "90%";

this.ejsSchedule.group.resources = [];

break;

case CalendarSettings.DefaultViewEnum.Week:

case CalendarSettings.DefaultViewEnum.Day:

this.ejsSchedule.rowAutoHeight = true;

if (this.calendarSettings.resources_per_page == 0) {

this.ejsSchedule.group.resources = [];

} else {

this.ejsSchedule.group = this.group;

}

break;

default:

this.ejsSchedule.rowAutoHeight = true;

this.ejsSchedule.group = this.group;

break;

}

this.ejsSchedule.dataBind();

}

[Swathi Ravi]

Hi Hasnain,

We have checked your reported issue by dynamically grouping the resource to the Schedule, but we were unable to replicate it at our end. The popupOpen event is properly triggered before and after adding resources to the Schedule. And you're using the currentViewChange event in Scheduler in your shared code snippets. There is no currentViewChange event in the schedule. You can use the navigating event, which is triggered when you change the view or date. Please check our shared sample and still you are facing the same issue, share the below information to proceed further at our end.

Sample: https://stackblitz.com/edit/angular-qgnxt1-mwybs9?file=src%2Fapp.component.ts

Api: https://ej2.syncfusion.com/angular/documentation/api/schedule/#navigating

• Replicate the issue in our shared sample or
• Issue replication sample.
• Video demo that represents the issue or
• Do you have any console errors? If any share the screenshot of the error.

Regards,

Swathi Ravi