Filtering Schedule in Timeline view with Resources

[Tim Hartog]

Hi,

I have a problem with the refresh of the schedule when this is filtered and new data is fetched or updated in the Schedule view and flickers the screen and jumps to top..

My situation is as follows:

The source for the Resources and Schedule events is Firestore.

As soon as an insert or update occurs in these collections the schedule is updated. This is working fine when there is no filtering done.

The way I filter is possibly wrong because on each update you can see the schedule refreshes and jumps back to the top.

What is the best way to filter Resources and their events in combination with Firestore?

Regards,

Bob 

[Hareesh Balasubramanian]

Hi Bob, 

  

Greetings from Syncfusion Support..! 

  

We have validated your shared query “What is the best way to filter Resources and their events in combination with Firestore?” at our end. And for that we have prepared CRUD sample with resources and in that the events for the Scheduler and data source for the resources has been loaded from the Firebase and the sample can be downloaded from the following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/156107/ze/sample1671192422  

  

And for further reference, kindly refer the below highlighted snippets for filtering for the Scheduler events and resource data sources and also kindly refer the below two screenshots of the Firebase storage, 

  

Resource data source image: 

 

Scheduler events image: 

 

  

  

Code snippet: 

  constructor(db: AngularFirestore) { 

    this.resItems = db.collection('ResourceData').valueChanges().subscribe(resData => { 

      this.categoryDataSource = resData; 

    }) 

    this.data = db.collection('Data'); 

    this.items = db.collection('Data').valueChanges().subscribe(data => { 

      this.items = data; 

      this.test = data; 

      let schObj = (document.querySelector('.e-schedule') as any).ej2_instances[0]; 

      let length = this.test.length; 

      for (let i = 0; i < length; i++) { 

        let endTime = this.test[i].EndTime.seconds.toString() + "000"; 

        let srtTime = this.test[i].StartTime.seconds.toString() + "000"; 

        this.test[i].StartTime = new Date(parseInt(srtTime)); 

        this.test[i].EndTime = new Date(parseInt(endTime)); 

      } 

      schObj.eventSettings.dataSource = this.test; 

    }) 

  } 

  

And for your reference, kindly refer the below KB link, 

https://www.syncfusion.com/kb/11191/how-to-perform-crud-actions-in-scheduler-with-firebase-as-db 

  

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

  

Regards, 

Hareesh 

[Tim Hartog]

Hello Hareesh,

Thank you very much for your info.

regards,

Bob

[Vengatesh Maniraj]

Hi Bob, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh   

[Arvind V V]

Hi, I have a similar question, in my project, data is being loaded from firebase. Unlike shown in this sample, I want to limit the data being retrieved from backend, only the data which needs to be shown should be retireved, based on startdate and end date. that means, i need to update the datasource everytime eventNavigate or datechange occur, while i tried to do that inside actioncomplete, first data was not getting displayed. Then i used, this.scheduleObj.refresh(). Now it works, but there is a small filcker caused by the refresh. Is there a better approch for this scenario?

  onActionComplete(args): void {

    if ( args.requestType === "viewNavigate" || args.requestType === "dateNavigate") {

      var currentViewDates = this.scheduleObj.getCurrentViewDates();

      var startDate = new Date(currentViewDates[0]);

      var endDate = currentViewDates[currentViewDates.length - 1];

      this.eventSettings$ = this._calendar.getEvents(startDate,endDate).pipe(

        map((data):EventSettingsModel=>{return {dataSource:data}}),

        tap(x=>{this.scheduleObj.refresh();})

      )

    }

  }

[Vinitha Devi Murugan]

Hi Aravind, 

 

Thanks for your update. 

 

We have validated your reported query at our end with your shared code. To resolve your reported issue we suggest you to use below code in your sample. 

 

onActionComplete(args): void { 

  if(args.requestType === "viewNavigate" || args.requestType === "dateNavigate") { 

    var currentViewDates = this.scheduleObj.getCurrentViewDates(); 

    var startDate = new Date(currentViewDates[0]); 

    var endDate = currentViewDates[currentViewDates.length - 1]; 

    // Assign scheduler data source like below 

    this.scheduleObj.eventSettings.dataSource = this._calendar.getEvents(startDate, endDate).pipe( 

      map((data): EventSettingsModel => { return { dataSource: data } }), 

     // tap(x => { this.scheduleObj.refresh(); }) 

      ) 

  } 

} 

 

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

 

Regards, 

Vinitha