[REACT] dynamic column pushes timeline columns to the right

[gotta go fast]

Hi Bryntum,

I have two problems I want to overcome.
First is that at first Scheduler render as you can see on screenshot there is no column placeholder rendered and this is because we add it dynamically in useLayoutEffect using ref.current.instance.

pushing-column.png (27.79 KiB) Viewed 90 times

After the useLayoutEffect starts to work we use such code, which adds a dynamic column to the scheduler. Column is not present, when Scheduler initially renders, and when it finally gets added it pushes to the right side timeline.

I want to achieve that there will be placeholder for a column, when column will get rendered there will be no layout shift.

  useLayoutEffect(() => {
   	const schedulerInstance = schedulerSettings.getSchedulerInstance();
    	const unassignedSchedulerInstance = schedulerSettings.getSecondarySchedulerInstance();

	if (shiftPreviewsData && schedulerInstance) {
  		// some other code for scheduler different mode 
  		... 
  		
  		if (mode === SchedulerMode.EMPLOYEES && unassignedSchedulerInstance) {
    		const { resources, resourceTimeRanges } = mapAssigneeSummary(
      			shiftPreviewsData.assigneesSummary
    		);
    		schedulerInstance.resources = resources;
    		schedulerInstance.resourceTimeRanges = resourceTimeRanges;
    		schedulerInstance.events = shifts.assigned;
    		unassignedSchedulerInstance.events = shifts.unassigned;

    		if (schedulerInstance.columns instanceof ColumnStore) {
      			schedulerInstance.columns.removeAll();
      			schedulerInstance.columns.add(employeeColumns.assigned);
    		}
   			
   		if (unassignedSchedulerInstance.columns instanceof ColumnStore) {
      			unassignedSchedulerInstance.columns.removeAll();
      			unassignedSchedulerInstance.columns.add(employeeColumns.unassigned);
    		}
  	} else {
    		schedulerInstance.resources = [];
   		schedulerInstance.events = [];
    		schedulerInstance.resourceTimeRanges = [];
  		}
	}
  }, [
    locations,
    mode,
    schedulerSettings,
    shiftPreviewsData,
    shifts.assigned,
    shifts.unassigned,
    employeeColumns.assigned,
    employeeColumns.unassigned,
  ]);
  

after-pushing-column.png (85.46 KiB) Viewed 90 times

Second Topic one is that there are some unnecessary scrolls in the columns

unnecessary-scrolls.png (15.08 KiB) Viewed 90 times

[tasnim]

Hi,

Could you please provide a runnable test case so we can reproduce the issue and give you a proper solution?

[gotta go fast]

I found a nice property forceFit since we do not use zoom and just one mode.

I set up in the config file

	forceFit = true; // now it properly adjusts to newly added column

It also fixed problem with too many scrolls ))

For anyone wondering how it works and its drawbacks
Set to true to force the time columns to fit to the available space (horizontal or vertical depending on mode).
Note that setting suppressFit to true, will disable forceFit functionality. Zooming cannot be used when forceFit is set.

[tasnim]

Glad to hear that you've got it fixed. Thank you for sharing the solution.

Good Luck ,
Tasnim

[gotta go fast]

This is how i wanted it to look . This is for anyone wondering how it looks after this simple prop set to true

fixed-pushing-column.png (93.61 KiB) Viewed 69 times