Can't bind remote data

[tcetinParticipant]

Hi,

I am trying to bind remote data but it doesnt get anything at the schedule.

here is my code.

@ViewChild('schedular',{static:false}) scheduler: jqxSchedulerComponent;

ngAfterViewInit(): void 
{
    this.getCourseSchedules().subscribe(data => {
        this.source.localData = data as CourseSchedule[]
        this.dataAdapter = jqx.dataAdapter(this.source)
    })

    console.log(this.source)
}

  schedules:CourseSchedule[]  

  schedulerSettings = {}
  appointmentDataFields: any =
  {
      from: "start",
      to: "end",
      description: "description",
      subject: "subject",
      resourceId: "calendar"
  };

 source =  {
    dataType: "array",
    dataFields: [
        { name: 'id', type: 'string' },
        { name: 'description', type: 'string' },
        { name: 'subject', type: 'string' },
        { name: 'calendar', type: 'string' },
        { name: 'start', type: 'date' },
        { name: 'end', type: 'date' }
    ],
    localData : []
} ; 

  resources: any =  
  {
      colorScheme: "scheme04",
      dataField: "calendar",
      source: new jqx.dataAdapter(this.source)
  };

  dataAdapter: any = new jqx.dataAdapter(this.source);
  date: any = new jqx.date();

  views: string[] | any[] =
  [
      'dayView',
      'weekView',
      'monthView',
      'agendaView'
  ];
  
  constructor(private repository: RepositoryService,private router: Router,
    private activeRoute: ActivatedRoute ) { 

    } 

  getCourseSchedules()
  {
      var courseId: string = this.activeRoute.snapshot.params['id'];
      var apiUrl = <code>/api/course/schedule?courseId=${courseId}</code>;
      return this.repository.getData(apiUrl).pipe(
          map(data => {
              let schedules = data as CourseSchedule[];
              let newSchedules: CourseSchedule[] = [];
              schedules.forEach((schedule) => {
                  const { start, end, ...other } = schedule;
                  newSchedules.push(<CourseSchedule>{
                      start: new Date(start),
                      end: new Date(end),
                      ...other
                  })
              });
              return newSchedules;
          })
      );
    
  }

[MartinParticipant]

Hello tcetin,

When you are setting re-setting the data adapter inside the AfterViewInit lifehook, try using the new keyword:
this.dataAdapter = new jqx.dataAdapter(this.source);

I have tested the following Example and it is working fine.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts