Async databinding

[JIG]

     Hello,

I'm following the databinding example in my project. I'm trying to load an scheduler with data coming from ASP.NET CORE api backend. The trouble i'm having is that this data is loaded async and i'm not able to show data on the scheduler. What I managed to do is load my resources on the board and that shows correctly. But tieing the events to the slot is where I'm stuck 

This is the code I got

      <kendo-scheduler
        [resources]="resources"
        [kendoSchedulerBinding]="events | async"
        (dateChange)="onDateChange($event)"
        [group]="group"
        [selectedDate]="selectedDate"
        *ngIf="!isLoading">
        <ng-template kendoSchedulerGroupHeaderTemplate let-resource="resource">
          <span [style.color]="resource.color">{{ resource.text }}</span>
        </ng-template>
        <kendo-scheduler-timeline-view> 
        </kendo-scheduler-timeline-view>
        <kendo-scheduler-timeline-week-view>
        </kendo-scheduler-timeline-week-view>
      </kendo-scheduler>

 

 ngOnInit() {
    this.isLoading = true;
    this.getLocations().then(data => {
      let result: any[] | { text: string; value: string; color: string }[] = [];
      data.forEach(element => {
        result.push({
          text: element.shortName,
          value: element.locationId,
          color: "#6eb3fa"
        });
      });

      this.resources[0].data = result;
      this.isLoading = false;

    });

    this.events = this.scheduleService.getSchedule(1690, '2018-10-22T00:00:00', '2018-10-22T00:00:00', 'C9FA11C2-B1DA-42FE-971A-BD1D5DB8E683', false);
    console.log(this.events);
  }

  ngAfterViewInit() {
    console.log('view loaded');
    this.events.forEach(item => {
      console.log(item);
    })
  }

  async getLocations(): Promise<Location[]> {
    let locationId = this.locationService.currentLocation.locationId;
    let response = this.locationService
      .getPlanningLocations(locationId)
      .toPromise();
    return response;
  }

getSchedule(securable: number, fromDate: string, untilDate: string, locationId: string, isBulk: boolean): Observable<SchedulerEvent[]> {
const params = new HttpParams()
.set('Securable', securable.toString())
.set('StartDate', fromDate)
.set('EndDate', untilDate)
.set('LocationID', locationId.toString())
.set('IsBulk', isBulk.toString());
return this.http.get<Schedule[]>(endpoint + '/GetSchedule', { headers: headers, params: params }).pipe(map(data => {
return data.map(item => {
return <SchedulerEvent>{ id: item.scheduleId, start: new Date(item.startDate), end: new Date(item.endDate), title: item.scheduleERPCode, locationId: item.locationId };
});
}));
}

 

getPlanningLocations(id: string): Observable<Location[]> {
return this.http.get<Location[]>(endpoint + `/GetPlanningLocations/${id}`, { headers: headers });
}

 

Can someone point me in the right direction ?

 

[Dimiter Topalov]

Hello Jimmy,

We cannot be certain what might be causing the issue based on the provided information, but I can suggest trying the following:

1) Instead of mutating the resources array ( this.resources[0].data = result;) try to replace it with a new instance, containing the required elements (something like this.resources = [{data: result, ...}, ...this.resources])

2) Ensure that the events are retrieved after the resources (for example move the call obtaining the events in the callback of the resource retrieval promise)



I hope this helps, but if the issue persists, please send us an isolated runnable project (it can contain some dummy data retrieved via fake async - an Observable or Promise resolved with the data collections) where it can be observed, so we can inspect it further, and determine what might be causing the problem. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[JIG]

We have fixed the issue like so

 

async initSchedule(start: string, end: string) {
let events: SchedulerEvent[] = [];
let locations = await this.getLocations();
let result: any[] | { text: string; value: string; color: string }[] = [];
for (let index = 0; index < locations.length; index++) {
const location = locations[index];
result.push({
text: location.shortName,
value: location.locationId,
color: "#DFDFDF"
});
events.push(...await this.loadEvents(location.locationId, start, end));
}

this.source.next(events);
this.resources[0].data = result;
}

[Dimiter Topalov]

Hi Jimmy,

Good job on resolving the issue, and thank you for sharing your solution with the community.

Do not hesitate to contact us again if you have other questions related to our components.

Regards,
Dimiter Topalov
Progress Telerik