Changing resources property doesn't update in the frozen rows

This issue should be fixed now in the latest sandbox build (2020.4.4741).

It also fixes this issue:
https://forums.daypilot.org/question/5244/showing-hiding-resource-columns-doesnt-synchronize-with-fro

Also here, the problem is still occuring!

Is there maybe a way to do a hard reset to let the whole component to be rendered again?

Can you please make sure that the previous version of DayPilot doesn't stay in the browser cache (Ctrl-F5)?

If the problem persists, can you please post the code that you use to update the resources?

In the frozen rows demo (https://javascript.daypilot.org/sandbox/scheduler/rowsfrozen.html) running the following in the console seems to work fine:

dp.resources[0].frozen = null;
dp.update();

I have to change the whole resources at once. I'm doing this through the scheduler config property.

<daypilot-scheduler [config]="schedulerConfig" [events]="events" #scheduler>
</daypilot-scheduler>

this.schedulerConfig.resources = this.resources;
this.scheduler.control.update();

This is the link to the code: https://drive.google.com/file/d/12L3X50dDl8-lcfI6HlyXBJedds8vbHRE/view?usp=sharing

I removed everything that is not related to the problem, from the code.

Thanks for the update. Unfortunately, I'm not able to reproduce the problem.

Could you please try to reproduce the problem using the following example? If you were able to modify it so that it reproduces the problem it would help a lot with debugging the issue.

1. Generate a new Angular project using the UI Builder at https://builder.daypilot.org/scheduler
2. Replace the src/app/scheduler/scheduler.component.ts content with the following code:

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';
import {DataService} from './data.service';
import ResourceData = DayPilot.ResourceData;

@Component({
  selector: 'scheduler-component',
  template: `
    <div class="space"><button (click)="updateResources()">Update resources</button></div>
    <daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>
  `,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

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

  events: any[] = [];

  config: DayPilot.SchedulerConfig = {
    timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
    scale: "Day",
    days: DayPilot.Date.today().daysInMonth(),
    startDate: DayPilot.Date.today().firstDayOfMonth(),
    timeRangeSelectedHandling: "Enabled",
    onTimeRangeSelected: function (args) {
      var dp = this;
      DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
        dp.clearSelection();
        if (!modal.result) { return; }
        dp.events.add(new DayPilot.Event({
          start: args.start,
          end: args.end,
          id: DayPilot.guid(),
          resource: args.resource,
          text: modal.result
        }));
      });
    },
    treeEnabled: true,
    heightSpec: "Max",
    height: 200
  };

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    this.ds.getResources().subscribe(result => this.config.resources = result);

    const from = this.scheduler.control.visibleStart();
    const to = this.scheduler.control.visibleEnd();
    this.ds.getEvents(from, to).subscribe(result => {
      this.events = result;
    });
  }

  updateResources() {
    let resources:ResourceData[] = [
      {name: "Frozen 1", id: "frozen", frozen: "top"},
      {name: "Resource 1", id: "r1"},
      {name: "Resource 2", id: "r2"},
      {name: "Resource 3", id: "r3"},
      {name: "Resource 4", id: "r4"},
      {name: "Resource 5", id: "r5"},
      {name: "Resource 6", id: "r6"},
      {name: "Resource 7", id: "r7"},
      {name: "Resource 8", id: "r8"},
      {name: "Resource 9", id: "r9"},
      {name: "Resource 10", id: "r10"},
      {name: "Resource 11", id: "r11"},
      {name: "Resource 12", id: "r12"},
    ];
    this.config.resources = resources;
  }

}

This example works fine with the latest sandbox build:

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/2020.4.4742.tar.gz --save

I don't see any problem when updating the resources using "Update resources" button but maybe I'm missing something.

Also, your code causes a double update. It doesn't affect this issue but it may affect performance. You should use either:

this.schedulerConfig.resources = this.resources;

This will use the change detection mechanism and Angular will update the Scheduler automatically.

But to improve the performance, I recommend using a direct update without storing resources in the config object:

this.scheduler.control.update({resources: this.resources});

See also:
https://doc.daypilot.org/scheduler/angular-performance/

So, I generated a new Angular project with the UI Builder at https://builder.daypilot.org/scheduler and I used the latest sandbox build. I chose Angular 8 (but the Angular version shouldn't really make a difference).

Then I changed the code according to my project (s. https://drive.google.com/file/d/1zb0DXxlZqmnl5xGRSVGsBbIxmsG0t7Ti/view?usp=sharing) and I was able to reproduce the problem.

Please notice how the frozen resources to the bottom don't get updated. If the rows are frozen to the top or aren't forzen at all, then it works correctly.

With this project I was also able to reproduce the problem I reported in (https://forums.daypilot.org/question/5244/showing-hiding-resource-columns-doesnt-synchronize-with-fro). It's interesting, that this problem also occured with frozen rows to the bottom. If the rows are frozen to the top or aren't forzen at all, then it works correctly.

So the two problems should be related to each other. Maybe they're caused by my data. However I can't tell what it could be.

I hope I'll get an answer from you soon. I would like to release the version of the software I'm working on but I can't do it because I blocked by these 2 problems plus this one (https://forums.daypilot.org/question/5237/no-row-header-scrolling-in-combination-with-frozen-rows) ;)

Thanks for the example - that helped to narrow the issue.

There was a problem with updating existing bottom-frozen rows. Also, the Scheduler doesn't expect frozen: "main" value and that value used in your sample data was causing some side effects.

Both these issues should be fixed now in the latest sandbox build (2020.4.4743). Your sample project works fine now with the new version

Please let me know if the problem persists.

Thank you very much for your help and your instant answer. Now it works very fine. I wasn't sure about the frozen: "main" neither, although it is mentioned here: (https://doc.daypilot.org/scheduler/frozen-rows). I will remove it anyway.

I'll wait for the answer to this issue: https://forums.daypilot.org/question/5237/no-row-header-scrolling-in-combination-with-frozen-rows and the keyboard navigation tutorial, then all my requirements should be realized.

At this point I want to admit, that the Scheduler component really cool is. This is the second case I'm using it for and it didn't disappoint me at all. Almost everything I expected from it, was there and possible to use.

Thanks

Great, thanks for the update! ;-)