This is a migrated thread and some comments may be shown as answers.

Kendo Scheduler Event Rendering Issue at start

4 Answers 44 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Vaibhav
Top achievements
Rank 1
Veteran
Vaibhav asked on 26 Mar 2021, 02:59 PM
Hello,
We are integrating kendo scheduler angular which is having issue for data rendering.
We are calling an api and pushing the data to array for first time when page load it is not showing any data. I debug the code data is going into binded events just need to render when it loads for first time.
When we are clicking to week or month at that time it shows data. (anything for refreshing the scheduler).
We are using kendo scheduler, Facing an issue that data items (events) are being binded in the kendoSchedulerBinding. But its not rendering in UI, when we swap between MonthView or Week View or Day View it's automatically rendering in UI.
Providing image after click on week view.

<kendo-scheduler [kendoSchedulerBinding]="schedulerEvent"
                                         [modelFields]="editService.fields"
                                         [slotDuration]="60"
                                         [editable]="true"
                                         [selectedDate]="selectedDate"
                                         (slotDblClick)="slotDblClickHandler($event)"
                                         (eventDblClick)="eventDblClickHandler($event)"
                                         (remove)="removeHandler($event)"
                                         (drop)="onDrop($event)"
                                         style="height: 800px;">
                            <kendo-scheduler-day-view>
                            </kendo-scheduler-day-view>
                            <kendo-scheduler-week-view>
                            </kendo-scheduler-week-view>
                            <kendo-scheduler-month-view>
                            </kendo-scheduler-month-view>
                        </kendo-scheduler>
                        <scheduler-edit-form [event]="editedEvent" #remindermodal
                                             [editMode]="editMode"
                                             [isNew]="isNew"
                                             (save)="saveHandler($event)"
                                             (cancel)="cancelHandler()"
                                             style="display: block; margin-top: 20px;">
                        </scheduler-edit-form>

4 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 30 Mar 2021, 07:59 AM

Hello Vaibhav,

Thank you for the provided screenshot.

Based on the provided details it seems that the Angular change detection is not triggered when the data is passed initially. Please ensure that the data for the Scheduler is available before its rendering on the page. e.g. provide the array of SchedulerEvent objects in ngOnInit hook. For more details check this article:

https://www.telerik.com/kendo-angular-ui/components/scheduler/data-binding/#toc-using-built-in-directive

As I am not sure how schedulerEvent array is created in the TS code I am unable to provide more suitable assistance for the case. Please could I ask you for some more details about the TS code responsible for creating the Scheduler collection, or ideally provide a runnable demo that reproduces the issue (like this StackBlitz for example). We will debug the code and be able to allocate the issue faster. Thank you in advance.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Vaibhav
Top achievements
Rank 1
Veteran
answered on 31 Mar 2021, 01:49 PM
https://stackblitz.com/edit/angular-f8yvzp?file=app/app.component.ts
Please open above link and add
<kendo-scheduler-month-view startTime="07:00">
            </kendo-scheduler-month-view>  @12 line
<button (click)="add()">Add</button> @ 15 line
public extraEvents: SchedulerEvent[] = [
    {
      id: 2,
      title: 'Lunch',
      start: new Date('2018-10-25T09:00:00'),
      end: new Date('2018-10-25T09:30:00'),
      recurrenceRule: 'FREQ=DAILY;COUNT=5;'
    },
    {
      id: 3,
      title: 'Dinner',
      start: new Date('2018-10-26T09:00:00'),
      end: new Date('2018-10-26T09:30:00'),
      recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR;COUNT=1461;'
    }
  ];
  add() {
    // console.log(this.events);
    this.events.push.apply(this.events, this.extraEvents);
    console.log(this.events);
  } @ 27 line
Please add this and check that if I press add button event got created but not render then switch it to month view to week view then it will be visible
0
Vaibhav
Top achievements
Rank 1
Veteran
answered on 31 Mar 2021, 02:09 PM
https://stackblitz.com/edit/angular-f8yvzp-v73xh1?file=app/app.component.ts

Now you can directly go to this link and click on add button on calendar which is pushing two more events in existing one ( you can check on stackblitz console that events got pushed ) but not reflecting immediately you need to swap between month and week to see that events.
0
Accepted
Martin
Telerik team
answered on 01 Apr 2021, 10:10 AM

Hi Vaibhav,

There is no special method that can be used to reload the Scheduler. The component might not be reloaded as te Angular's change detection mechanism not being triggered. A common pitfall is when a component property isn't updated by reference, just its value is changed. In such cases, the change detection isn't triggered and the view won't be re-rendered.

There are a few methods that would help to change the reference collection but the most popular are using the slice method or the spread operator [...].

Generally speaking, when replacing the data collection, the Scheduler is bound to, with a new one will automatically trigger the Angular change detection and the view will re-rendered.

Please check the updated demo:

https://stackblitz.com/edit/angular-f8yvzp-qz4yeo?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Scheduler
Asked by
Vaibhav
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
Vaibhav
Top achievements
Rank 1
Veteran
Share this question
or