We started testing SchedulerPro with 300 events and we experienced that scrolling is very lagging.
Drag and drop is too not smooth.
On Big data set example I can reproduce this behavior with showing 10k events or 1000 resources with 20 events.
On previous versions it worked better
Hi,
I stepped back a some versions (to 4.1.0) but was still getting laggy scroll in this scenario, which version did it work better for you in?
Profiled it and there is definitely room for improvement anyhow, opened a ticket on it: https://github.com/bryntum/support/issues/3486
I think it was happen after fixing problem in this topic:
viewtopic.php?f=44&t=18573&p=91812#p91812
Scroll after that fix is not working so smooth.
Thank you for take a look for improving it!
EDIT:
Probabl yfixing this issue can improve this:
https://github.com/bryntum/support/issues/3477
And I've just investigated that custom event template as Angular customElements is causing it.
With disabled rendering eventBodyTemplate:
// commented
// eventBodyTemplate: (data: EventBodyTemplateConfig) => this.onEventBodyTemplateEvent(data),
// eventRenderer: (event: any) => this.onEventRendererEvent(event),
It's smooth.
But with 300 tasks with custom eventBodyTemplate....:
Sometimes we can show about 800 tasks in total
If you want it performant I recommend rendering event content using html (or for best performance DomConfigs) over Angular components. If that is not an option you should probably not use eventBodyTemplate but rather handle the components in a https://bryntum.com/docs/scheduler/#Scheduler/view/SchedulerBase#event-renderEvent listener, making sure to reuse already rendered components over always rendering new.
Other than that, what Angular does is unfortunately out of our control.
You can define your custom template in Angular by using ng-template, for example it could look like this:
<ng-template let-eventData #myTemplate
<div class="event-container">
<span class="event-name">{{ eventData.name }}</span>
</div>
</ng-template>
And just send this template via input to scheduler wrapper.
<bryntum-scheduler-pro [eventTemplate]="myTemplate">
It could let avoid using angular custom elements, for example in tooltips.
But I am not sure how Scheduler core and the wrapper is working.
[eventTemplate] would be just ignored by the wrapper. To explain: the wrapper takes all config options, properties and events as documented in API docs, defines them as @Input in Angular wrapper and implements a special processing of them where needed.
You can take a look at the source code in the file I am attaching.
johan.isaksson wrote: ↑Mon Oct 04, 2021 8:44 amIf you want it performant I recommend rendering event content using html (or for best performance DomConfigs) over Angular components. If that is not an option you should probably not use eventBodyTemplate but rather handle the components in a https://bryntum.com/docs/scheduler/#Scheduler/view/SchedulerBase#event-renderEvent listener, making sure to reuse already rendered components over always rendering new.
Other than that, what Angular does is unfortunately out of our control.
What do you mean by 'handling components'? How to block making div 'b-released'?
I want to make our scheduler very smooth, but when we are showing 400 tasks, 400 resource time ranges,keepsOriginalTimeSpan = true and showing range over 2-3 months, the scrolling is not so smooth and using gantt feels is not soo good.
