scrollToDate doesn't work in Angular 7

Post by **bova1982** » Mon Mar 04, 2019 4:12 pm

Hi tried using angular6 demo of 1.2.2 version. Everything works until I add

block: "center"

in the parameters of scrollToNow function.
In this conditions, that you can find in the attachments, I get the following exception:

ERROR TypeError: Cannot read property 'x' of undefined
    at SubGridScroller.getDeltaTo (scheduler.umd.js:26140)
    at SubGridScroller.scrollIntoView (scheduler.umd.js:61461)
    at Scheduler.scrollToCoordinate (scheduler.umd.js:105972)
    at Scheduler.scrollToDate (scheduler.umd.js:105908)
    at Scheduler.scrollToCoordinate (scheduler.umd.js:105964)
    at Scheduler.scrollToDate (scheduler.umd.js:105908)
    at Scheduler.scrollToNow (scheduler.umd.js:105923)
    at SchedulerComponent.push../src/app/scheduler/scheduler.component.ts.SchedulerComponent.ngOnInit (scheduler.component.ts:113)
    at checkAndUpdateDirectiveInline (core.js:9250)
    at checkAndUpdateNodeInline (core.js:10514)

Either removing the block parameter or changing its value, the error disappears. Unluckily the centering is the exact feature I want. Can you please double check?

Post by **pmiklashevich** » Thu Mar 07, 2019 2:42 pm

Hello,

I've checked the testcase and I'm able to reproduce the issue even within our angular6 demo. It's enough to add scrollToNow right after scheduler creation:

    this.schedulerEngine = new Scheduler(config);

    this.schedulerEngine.scrollToNow({
      block: 'center',
      animate: false
    });

All our demos are designed to show you just a concept of how to use this or that feature or how to integrate grid/scheduler to this or that framework. When you start changing demos you likely will have to adjust the application code. In this case the application layout has to be improved. In this application when there is no events in the scheduler the scheduler body is 0 height, so there is nothing to scroll at all. So to make it work you need scheduler to have some height. Scheduler component supports height config and minHeight property. However they will have no effect in that angular application. I played around styles in the demo to get it work similar to all our simple demos. Here is the list of changes might be applied:

scheduler.component.ts:

@Component({
  selector: 'scheduler',
  template: '<div style="flex : 1; display : flex; flex-flow : column nowrap; align-items : stretch;"></div>'
})

app.component.scss:

:host {
  font-family : Roboto, sans-serif;
  flex        : 1;
  display     : flex;
  flex-flow   : column nowrap;
  align-items : stretch;
}

scheduler {
  flex        : 1;
  display     : flex;
  flex-flow   : column nowrap;
  align-items : stretch;
}

#app {

  padding : 1em 2em;
  flex        : 1;
  display     : flex;
  flex-flow   : column nowrap;
  align-items : stretch;

  #tools {

index.html:

  <style>
    html {
      height      : 100%;
      width       : 100%;
      display     : flex;
      flex-flow   : column nowrap;
      align-items : stretch;
    }

    body {
      margin      : 0;
      flex        : 1;
      display     : flex;
      flex-flow   : column nowrap;
      align-items : stretch;
    }
  </style>
</head>
<body>
  <app-root></app-root>
</body>

app.component.html:

  <scheduler
    #scheduler
    [autoHeight]="false"

You as a core developer of your application, might have a different layout, just keep in mind scheduler has to have some height!

I've created a ticket to adjust all our angular demos to the flexible layout: https://app.assembla.com/spaces/bryntum/tickets/7767

Thanks for bringing this problem to our attention!

Cheers,
Pavel

Support Forum

scrollToDate doesn't work in Angular 7