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

Async databinding

3 Answers 157 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
JIG
Top achievements
Rank 1
JIG asked on 03 Apr 2019, 07:47 AM

     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 ?

 

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 05 Apr 2019, 06:24 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
JIG
Top achievements
Rank 1
answered on 05 Apr 2019, 06:44 AM

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;
}

0
Dimiter Topalov
Telerik team
answered on 08 Apr 2019, 08:29 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Scheduler
Asked by
JIG
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
JIG
Top achievements
Rank 1
Share this question
or