Angular2 scrollTo() on click event

Asked by Martin
10 years ago.

I am using the new Angular2 component, and setting up a DayPilot.Angular.Schedule component for a daily schedule. I am using two radiobuttons to set the cellDuration to either 5, or 10 minutes. These works great.

I want the schedule to scroll to a specific hour on init, and I am using the event "onAfterRender" to accomplish that. That also works great.

But when the radiobutton click event is fired, I also want to reset the scroll to the same hour, but the method Scheduler.control.scrollTo() does not scroll to the date that I input.

Here is my code:

Buttons in my template:

<input type="radio" name="cellduration" value="5" checked (click)="changeCellDuration($event)">5 min
<input type="radio" name="cellduration" value="10" (click)="changeCellDuration($event)">10 min

Here are my two functions in my component:

changeCellDuration(event) { //Called by the click event
this.cellDuration = event.srcElement.value;
this.scheduler1.config.cellDuration = this.cellDuration; //This works fine
this.resetScrollPosition(7); //This does not work
}
private resetScrollPosition(startHour: number) {
var startDate = (this.scheduler1.control.startDate as DayPilot.Date);
startDate = startDate.addHours(startHour); //Adds the nr of hours ontop of current date
this.scheduler1.control.scrollTo(startDate);
}

the function "resetScrollPosition" is the function used in my onAfterRender, so I know that it works

onAfterRender: args => {
this.resetScrollPosition(7);
}

I also tested to use the control.setScrollX function in my "resetScrollPosition" function, using this formula:

this.scheduler1.control.setScrollX(this.scheduler1.control.cellWidth * ((startHour * 60) / this.scheduler1.control.cellDuration));

It works as expected on init, and works on the first time I switch cellDuration, but all following changes also breaks.

I have attached a screenshot of some debuglogs of these functions.

It shows 3 roundtrips into the function "resetScrollPosition" using the setScrollX formula mentioned above.

First one is the init, which returns the expected result. Second time, I switch from cellDuration 5, to 10, that also works as expected. Third I switch back from 10 to 5. Thats when the scrollX I input differs from the actual one set in the Scheduler.

scrolltolog.png

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

This issue should be fixed now in the latest sandbox build (8.3.2510):
https://npm.daypilot.org/

You can use the following code to keep the current position when changing the scale/cellDuration/cellWidth:

  switchToDayScale() {
    this.config.scale = "Day";
    this.config.cellWidth = 100;
    this.scheduler1.control.scrollTo(this.scheduler1.control.getViewPort().start);
  }

  switchToHourScale() {
    this.config.scale = "Hour";
    this.config.cellWidth = 10;
    this.scheduler1.control.scrollTo(this.scheduler1.control.getViewPort().start);
  }

Comment posted by Martin
10 years ago.

Thanks for the reply!

Getting this error when I updated to the latest sandbox version. I also get this when I took the latest release version.

TypeError: Cannot read property 'length' of undefined
at $h.diff (daypilot-angular.min.js:38)
at AngularScheduler.DayPilot.Angular.Scheduler.AngularScheduler.updateEvents (daypilot-angular.min.js:38)
at AngularScheduler.DayPilot.Angular.Scheduler.AngularScheduler.ngDoCheck (daypilot-angular.min.js:38)
at Wrapper_AngularScheduler.detectChangesInternal (wrapper.ngfactory.js:39)
at _View_AppComponent0.detectChangesInternal (component.ngfactory.js:218)
at _View_AppComponent0.AppView.detectChanges (core.umd.js:9197)
at _View_AppComponent0.DebugAppView.detectChanges (core.umd.js:9302)
at _View_AppComponent_Host0.AppView.detectViewChildrenChanges (core.umd.js:9223)
at _View_AppComponent_Host0.detectChangesInternal (host.ngfactory.js:38)
at _View_AppComponent_Host0.AppView.detectChanges (core.umd.js:9197)

This is my config:

locale: "sv_SE",
startDate: "2016-10-22",
scale: "CellDuration",
cellGroupBy: "Hour",
eventHeight: 50,
barHidden: true,
rowMinHeight: 50,
rowHeaderWidth: 120,
cellDuration: this.cellDuration,
cellWidthSpec: "Fixed",
cellWidth: 12,
theme: "scheduler_green",
onAfterRender: args => {
console.log("init from onAfterRender");
this.resetScrollPosition(7);
}

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

Thanks for reporting the issue.

It happens when the [events] attribute is not specified or doesn't point to an array.

It's fixed now in build 2512. Let me know if there is any problem.

Comment posted by Martin
10 years ago.

Thanks, that worked great!

Both the scrollTo and setScrollX works as intended now as well.

I also tried the code you provided (this.scheduler1.control.scrollTo(this.scheduler1.control.getViewPort().start);), and that is probably a better way of handling the change in cellDuration. Thanks for the tip!

On another topic, are there any plans of adding the DayPilot.Modal into this angular module? Or maybe making a typescript d.ts for it? It'd be nice to not have to use another lib for the modals I plan on using in the click events.

Thanks again!

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

The current DayPilot.Modal can't be used because you'd want to build the content as an Angular2 component.

The Angular 2 replacement for the modal dialog is in the works. It uses a slighly different approach (and visual layout) but it lets you define the content inline like this:

<daypilot-modal #modal>
  <form #newEventForm="ngForm">
    <h2>New Event</h2>
    <input [(ngModel)]="name" name="name" required> 
    <button type="submit" (click)="createEvent()" [disabled]="!newEventForm.form.valid">OK</button>        
    <button (click)="modal.close()" formnovalidate>Cancel</button>        
  </form>
</daypilot-modal>

It will be added in one of the next builds so you'll be able to try it out.

Comment posted by Martin
10 years ago.

Cant wait! Thanks!

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