Event when Schedule (or RecurrenceEditor) is rendered

[Julius Peter]

Hello,

I'm experiencing errors in the Schedule component and also the RecurrenceEditor component (which I use in an Angular material dialog) in cases where the respective object does exist, but is not yet rendered (eg. scheduleObj.isRendered = false). Some methods throw an error under these conditions (usually Type errors ... cannot xxx of undefined).

So I'm looking for an event (exposed as output) that fires when the scheduler/recurrenceEditor is rendered, so I can run my code when the rendering is complete. Have not found anything like that in the docs (created does not help).

Thx a lot for your help!

Julius

[Hareesh Balasubramanian]

Hi Julius, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query using dataBound event of the Scheduler which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-defalut-scheduler-sample?file=app.component.ts  

API link: https://ej2.syncfusion.com/angular/documentation/api/schedule/#databound  

  public onDataBound(): void { 

    if (this.flag) { 

      console.log("New Event Created"); 

      this.flag = false; 

    } 

  } 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh 

[Julius Peter]

Thx Hareesh,

looks to me a bit like a crutch as the proposed event fires every time when (event?) data are bound to the schedule.  I would be looking for an event that fires once when the schedule is rendered (not sure if a re-rendering would for a certain amount of time set the scheduler to isRendered = false). Purpose is to avoid the type errors I get when e.g. calling getViewDates() on a created, but not (fully) rendered schedule.

Also - is there any event available for the RecurrenceEditor object, that fires when the object is rendered. I'm currently trying different timeouts before loading a RecurrenceRule into the editor to avoid an error (can share the error details if needed), but this is not really a solution:

  if (this.showRecurrenceEditor && this.eventData?.RecurrenceRule) {

let loadRecurrenceRule = true;

[10, 25, 50, 100, 200, 500].forEach(t => setTimeout(()=>{

if ((this.recEditorObj as any)?.isRendered && loadRecurrenceRule) {

console.log(this.recEditorObj, t)

this.recEditorObj.setRecurrenceRule(this.eventData.RecurrenceRule);

this.eventData.RecurrenceRule = this.recEditorObj.getRecurrenceRule();

loadRecurrenceRule = false;

}

},t));

}

[Hareesh Balasubramanian]

Hi Julius, 

Thanks for the update. 

Q1: I would be looking for an event that fires once when the schedule is rendered (not sure if a re-rendering would for a certain amount of time set the scheduler to isRendered = false). Purpose is to avoid the type errors I get when e.g. calling getViewDates() on a created, but not (fully) rendered schedule 

This query can be achieved using dataBound event of the Scheduler since we couldn’t get current view dates in created event and we have a flag variable so that code within the event will not work while performing other actions in it and the sample can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-defalut-scheduler-sample-2fz6vm?file=app.component.ts  

  public flag: Boolean = true; 

  public onDataBound(): void { 

    if (this.flag) { 

      var events = this.scheduleObj.getCurrentViewEvents(); 

      console.log(events); 

      this.flag = false; 

    } 

  } 

Q2: Also - is there any event available for the RecurrenceEditor object, that fires when the object is rendered. I'm currently trying different timeouts before loading a RecurrenceRule into the editor to avoid an error (can share the error details if needed), but this is not really a solution. 

Currently we don’t have any events for the Recurrence component after rendered and in the meantime kindly share with us more details like the use case scenario/image/video demo of your requirement in order to give the prompt solution at our end. 

We will be happy to assist you. 

Regards, 

Hareesh 

[Julius Peter]

Thanks Hareesh,

I decided to use the Angular afterViewChecked lifecycle event (which fires quite often on any change) and check the (hidden) isRendered property with a flag to avoid multiple executions of the startup code. This approach should work also for the scheduler .

ngAfterViewChecked() {

if (this.showRecurrenceEditor && this.loadRecRule &&this.eventData?.RecurrenceRule) {

if ((this.recEditorObj as any)?.isRendered) {

this.recEditorObj.setRecurrenceRule(this.eventData.RecurrenceRule);

this.loadRecRule = false;

}

}

}

That said and considering the fact that some of your components are a bit fickle about being used (mostly calling methods) before being fully rendered (that is the throw an error when called if target is not rendered) I'd say that it would be a boon to the Syncfusion (Angular) development community to consistently expose a created as well as a rendered event for your components (as e.g. *ngIf clauses could easily create a timing issue / race condition). Pls. consider this for development discussions.

[Nevitha Ravi]

Hi Julius, 

Thanks for your valuable suggestion. 

We will validate and consider your proposal in future. 

Regards, 

Nevitha