Wrong behaviour when navigating using keyboard API after entering inline editing mode

Asked by Anonymous
2 years ago.

Hi,
I reported many issues, that you fixed most of them in this ticket:
https://forums.daypilot.org/question/5600/strange-behaviour-when-navigating-using-keyboard-api-after-

There are still three open issues. I really appreciate it, if you could at least fix this one, because it's very obvious and exposed to the users.

The error can be reproduced using this sample project:

[...]

Try to reproduce the error in the same row like in this video: https://drive.google.com/file/d/1tm1Wb_9pYV_-ok8cD35NOKeJMLsh91OJ/view?usp=sharing

The error is caused by this line

this.scheduler.control.rows.update(this.scheduler.control.rows.find(detailResource.id));

in this event:

onEventEdited: (args) => {      
      if (args.canceled) {
        return;
      }

      // Omitted

      // Update detail row total
      let detailResource = this.getResource(args.e.data.resource);
      this.scheduler.control.rows.update(this.scheduler.control.rows.find(detailResource.id));

      // Omitted  
}

I omitted my code from the event. Basically I add every value the user enters to the total in the frozen rows at the bottom.

The error occures only with new entered values. As soon as I save these new values and reload them again, the error doesn't happen.

If you can't fix it, maybe you can suggest me another approach, since the error ist caused by the way I'm using the scheduler.

Best regards.

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

The event updates are performed asynchronously so that all updates performed in the same code segment can be merged and performed at once.

That applies to the default edit action (including onEventEdit and onEventEdited handlers) as well - the actual update of the event is postponed. If you call rows.update() in onEventEdited it will be performed before the actual update and it will disrupt your logic.

You will need to postpone it like this:

setTimeout(() => {
  this.scheduler.control.rows.update(this.scheduler.control.rows.find(detailResource.id));
}, 0);

An even better way (reactive style) would be to call cells.invalidate() for the row cells instead - the cells will be updated automatically during the postponed event update.

this.scheduler.control.rows.find(detailResource.id).cells.all().invalidate();

Comment posted by Anonymous
2 years ago.

Thank you for your answer. It seems to work with the second solution.

this.scheduler.control.rows.find(detailResource.id).cells.all().invalidate();

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

Wrong behaviour when navigating using keyboard API after entering inline editing mode

Products

Learn

Get Support

DayPilot Pro