[INFO REQ] available width and tick size

[Exigo]

Hey

I just have a question about width of the scheduler changing.

If you in this example: https://bryntum.com/examples/scheduler-pro/bigdataset/ change the width of the columns to something very small and have a 1080p screen, the scheduler lags quite a bit, because it has to draw all of the elements again. My guess is the ticksize doesn't fit and is then stretched.

We sometimes change the size of our scheduler with a sidemenu popping in, and when zoomed all the way out in the scheduler, it lags quite a bit on a big schedule with a lot of events.

Is there a way to force a minimum available space, so even if the schedule window is made smaller it will still "fit" to that size?

I've found this work around (please ignore the way that i define availableSpace, i'll rewrite it with your overwrite class )

This makes sure the scheduler always have the availableSpace of it's parent html element, and that the sibling element just makes the schedule window smaller, and it gets scrollbars to reach the availablespace.

Object.defineProperty(TimeAxisViewModel.prototype, 'availableSpace', {
      // eslint-disable-next-line object-shorthand
      set: function (space) {
        let minWidth = this.owner.appendTo.parentElement.offsetWidth - this.owner.subGrids.locked.width;
        minWidth -= 7; //Splitter width;
        minWidth -= this.owner.appendTo.offsetWidth - (this.owner.subGrids.normal.width + this.owner.subGrids.locked.width + 7); // scrollbar present
        if (space < minWidth) {
          space = minWidth;
        }

    const me = this;
    // We should only need to repaint fully if the tick width has changed (which will happen if forceFit is set, or if the full size of the time axis doesn't
    // occupy the available space - and gets stretched
    me._availableSpace = Math.max(0, space);

    if (me._availableSpace > 0) {
      const newTickSize = me.calculateTickSize(me.originalTickSize);

      if (newTickSize > 0 && newTickSize !== me.tickSize) {
        me.update();
      }
    }
  }
});

Cheers
Andreas @ Exigo

[tasnim]

Hello,
Sorry, I'm not able to reproduce it. Could you please provide a video that how you're reproducing it?

[Exigo]

I set the rowheight to 10 to make it more clear

[tasnim]

Hi,
I'm not able to reproduce it. It works fine here. What OS and browser are you using?

[Exigo]

Windows, chrome. We are able to do it on all our computers, as long as the screen is 1920*1080px. For a smaller screen, setting the window to 50% makes it easier to reproduce.

[tasnim]

Thanks for your clarification and report. Reproduced. Here is a ticket to track progress https://github.com/bryntum/support/issues/5060

Good Luck ,
Tasnim

[Exigo]

Hehe, thank you. If anyone else runs into the problem here is a "finished" fix of it. Might have to tweak it a bit for your scheduler:

Object.defineProperty(TimeAxisViewModel.prototype, 'availableSpace', {
  // eslint-disable-next-line object-shorthand
  set: function (space) {
    let minWidth = this.owner.appendTo.parentElement.offsetWidth - this.owner.subGrids.locked.width;
    minWidth -= 7; //Splitter width;
    if (this.owner.hasVerticalOverflow) {
      minWidth -= DomHelper.scrollBarWidth;
    }
    if (space < minWidth) {
      space = minWidth;
    }

const me = this;
// We should only need to repaint fully if the tick width has changed (which will happen if forceFit is set, or if the full size of the time axis doesn't
// occupy the available space - and gets stretched
me._availableSpace = Math.max(0, space);

if (me._availableSpace > 0) {
  const newTickSize = me.calculateTickSize(me.originalTickSize);

  if (newTickSize > 0 && newTickSize !== me.tickSize) {
    me.update();
  }
}
  }
});

Cheers
Andreas @ Exigo

[tasnim]

Thank you so much