Infinite scrolling only works after browser refresh(F5) with version 2020.2.4516

Asked by Ruud
3 years ago.

Hi,
I have been using Infinite scrolling on version 2020.2.4481, and it works great. I upgraded to version 2020.2.4516 and now i have the issue that Infinite scrolling only works after the scheduler is loaded and i refresh the page again using F5.
The Infinite scrolling doesn't work anymore when starting the project and navigating to the page that uses the scheduler. The scheduler loads and everything else seems to work but not the Infinite scrolling. Hitting F5 while on the page containing the scheduler seems to fix things. Version 2020.2.4481 did not have this issue.

I see in the release notes that there was en improvement for the Infinite scrolling in version 2020.2.4516. Do i need to configure additional properties to let it function properly again?

I am using angular 8.14 within Chrome Version 81.0.4044.138 (Official Build) (64-bit) and the following infinite scrolling config: (i have multiple zoom levels but the one shown is the one that is initialised)

infiniteScrollingEnabled: true,
infiniteScrollingMargin: 20,
infiniteScrollingStepDays: 93,
dynamicLoading: true,
onScroll: (args) => {
   let start = args.viewport.start;
   let end = args.viewport.end;

   this.eventService.getEvents(start, end).subscribe((result) => {
      args.events = result;
      args.loaded();
   });
},
zoomLevels: [
{
   name: 'Zes weken',
   properties: {
      scale: 'CellDuration',
      cellDuration: 1440,
      cellWidth: (args) => {
         if (<any>that.scheduler.control && (<any>that.scheduler.control).nav && (<any>that.scheduler.control).nav.scroll) {
            return Math.floor((<any>that.scheduler.control).nav.scroll.clientWidth / 42);
         }
         return 1;
      },
      timeHeaders: [{ groupBy: 'Month' }, { groupBy: 'Week' }, { groupBy: 'Day', format: 'd' }],
      startDate: DayPilot.Date.today().firstDayOfYear(),
      days: DayPilot.Date.today().daysInYear(),
   },
}],
zoom: 2,

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Let me check that!

Answer posted by Dan Letecky [DayPilot]
3 years ago.

Version 4516 with the following config it seems to work fine:

  config: DayPilot.SchedulerConfig = {
    infiniteScrollingEnabled: true,
    infiniteScrollingMargin: 20,
    infiniteScrollingStepDays: 93,
    dynamicLoading: true,
    onScroll: (args) => {
      let start = args.viewport.start;
      let end = args.viewport.end;

/*      this.eventService.getEvents(start, end).subscribe((result) => {
        args.events = result;
        args.loaded();
      });*/
    },
    zoomLevels: [
      {
        name: 'Zes weken',
        properties: {
          scale: 'CellDuration',
          cellDuration: 1440,
          cellWidth: (args) => {
            if (<any>this.scheduler.control && (<any>this.scheduler.control).nav && (<any>this.scheduler.control).nav.scroll) {
              return Math.floor((<any>this.scheduler.control).nav.scroll.clientWidth / 42);
            }
            return 1;
          },
          timeHeaders: [{ groupBy: 'Month' }, { groupBy: 'Week' }, { groupBy: 'Day', format: 'd' }],
          startDate: DayPilot.Date.today().firstDayOfYear(),
          days: DayPilot.Date.today().daysInYear(),
        },
      }],
    zoom: 0,
  };

I've replaced the config and updated the version in the sample project from this tutorial:
https://code.daypilot.org/82376/angular-scheduler-infinite-scrolling

Are you able to reproduce the issue using the sample project? What exactly doesn't work as expected?

Comment posted by Ruud
3 years ago.

I tried the sample project and it worked. Even when i changed the config to be more like my own. Our application is a bit more complex. Maybe it has something to do with the routing and initialisation of our components. The infinity scrolling only fails to work if i start the application, login and navigate to the scheduler view.
If i press F5 and on the scheduler screen it seems to fix the infinite scrolling functionality.

I still need to add some extra functionality, so for now i will revert to the previous version. I will look into this a bit more when i'm done with that.

thanks for your help up until now. and i will get back to you.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

OK, let me know if you find something out.

Comment posted by Ruud
3 years ago.

Hi Dan,

I finished most of the implementation. For this i adjusted some things in the config and rewrote my bubble implementation. When i upgraded again to v2020.2.4516 i can't reproduce the infinite scrolling issue.
So i guess this issue can be closed

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Hi Ruud,

Great, thanks for the update!

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Infinite scrolling only works after browser refresh(F5) with version 2020.2.4516

Products

Learn

Get Support

DayPilot Pro