Guidance on Implementing Grouping in Infinite Scroll–Enabled Scheduler

[priyankara]

Hi Team,

We’re in the process of transforming our standard Bryntum Scheduler setup into one that supports infinite scrolling. However, I’ve encountered some performance issues when attempting to apply resource grouping in this mode.

Specifically:

The UI freezes or becomes unresponsive during the grouping process.
In some cases, the infinite scroll functionality breaks after grouping is applied.

Before proceeding further, I’d like to confirm:

Is grouping a recommended or supported feature when using infinite scroll in Scheduler Pro?

If so, could you please provide guidance or best practices for implementing grouping efficiently in an infinite scroll–enabled scheduler setup?

Any insights or code examples would be greatly appreciated.

Thank you for your time and support.

My Code

 
 protected async toggleCapacityPlanner(capacityPlannerState: CapacityPlannerState): Promise<void> {
    if (capacityPlannerState.isCapacityPlannerEnabled) {
      await this.updateEmployeeGrouping(capacityPlannerState);
      this.updateGroupSummary(capacityPlannerState);
      return;
   }

schedulerInstance.features.group.disabled = true;
await schedulerInstance.resourceStore.clearGroupers();
schedulerInstance.features.groupSummary.disabled = true;
this.clearGroupEventListeners();
  }
 
  protected updateGroupSummary(capacityPlannerState: CapacityPlannerState): void {
 const groupSummaryConfig = this.schedulerFeaturesService.getGroupSummaryConfig(capacityPlannerState);	
  schedulerInstance.features.groupSummary.disabled = true;


schedulerInstance.features.groupSummary.summaries = groupSummaryConfig.summaries as SchedulerSummaryOptions[];
schedulerInstance.features.groupSummary.disabled = groupSummaryConfig.disabled as boolean;

const tooltipConfig = this.schedulerFeaturesService.getGroupSummaryTooltipConfig(capacityPlannerState);
schedulerInstance.features.groupSummary.setConfig(tooltipConfig);
  }
 
 
 override async updateEmployeeGrouping(capacityPlannerState: CapacityPlannerState): Promise<void> {
    const scheduler = schedulerInstance;
    const groupConfig = this.schedulerFeaturesService.getGroupConfig(capacityPlannerState);
    const { field, disabled } = groupConfig;

const groupFeature = scheduler.features.group;
if (field) groupFeature.field = field;
groupFeature.disabled = !!disabled;

const store = scheduler.resourceStore;

await schedulerInstance.resourceStore.group({
  field: groupConfig.field as string,
  fn: this.schedulerFeaturesService.resourceStoreGroupSortFunction,
  ascending: true
});

if (store.trigger) {
  console.log('Triggering refresh after grouping change');
  store.trigger('refresh'); 
}
  }

[ghulam.ghous]

Hi there,

Grouping is not supported when the underlying Store is lazy loaded/paginated — and infinite-scroll setups commonly use lazyLoad. See the StoreGroup docs for that caveat: StoreGroup.

[priyankara]

Thank you!

[priyankara]

Hi Ghulam,

Thank you for your assistance so far. I would like to clarify a couple of points:

1. Are there any plans to support this feature in future releases?
2. Is there an alternative approach or recommended workaround for implementing grouping?
   I appreciate any guidance you can provide

[ghulam.ghous]

Hi there,

Are there any plans to support this feature in future releases?

Please subscribe to this ticket: https://github.com/bryntum/support/issues/7951

Is there an alternative approach or recommended workaround for implementing grouping?

Unfortunately we do not have a workaround for this at the moment. Because it is kinda complex thing to implement. But if it is something important for you, maybe consider sponsored development for this using our professional services.

[joakim.l]

(ghulam was faster than me, but I'll leave my reply here as well)

Hi

We have this on our road-map for 2026. Here's a ticket you can use to track the process of this: https://github.com/bryntum/support/issues/7951

From your example code, I can see you're using group summaries. Summaries will work when we implement support for grouping in lazy loading, but of course only on the dataset already loaded. So if you're using summaries you will probably need to make sure that all groups loads fully, we will probably add some way of configuring this.

Another approach you could try right now is to convert the resources to a "tree" hieararchy. That is supported with infinite scroll/lazy load. But of course, using summaries here would also only work on complete datasets.

A third approach is to not use lazy loading for the resource store, and only use it for events.

[priyankara]

Thank you, Ghulam and Joakim, for your assistance!