[ANGULAR] Adjust width of Resource Columns when collapsed

[valereimann]

I have multiple columns, which are grouped and collapsible.
I want the width of the Resources to adjust to the mandatory width.

The first picture shows the collapsed columns. The Red area should automatically be "removed".
The second picture shows the expanded columns.
(Black bars are just to anonymize the data)

Is this possible? And how is it possible?
I'm using scheduler pro.

[ghulam.ghous]

Hi there,

We do not support it. But there is a workaround that can be used for it. You will have to directly manipulate the width of the subGrid. First of all you will have to set https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#config-fillLastColumn to false. Then on https://bryntum.com/products/schedulerpro/docs/api/Grid/column/Column#event-columnCollapseToggle, you will have to either calculate the width of the visible columns and set the locked subGrid width to that. Or maybe you can just subtract the width of the collapsed column from the subGrid width and set it. You will have to play around with it.

https://bryntum.com/products/schedulerpro/docs/api/Grid/view/SubGrid#config-width

Hope this helps!

[valereimann]

Thank you. How can I set Grid.column.Column#event-columnCollapseToggle listener in my config File?
I have other listeners in SchedulerProConfig.listeners but that doesn't work for the columnCollapseToggle listener.

[ghulam.ghous]

Hi,

I have just checked and it should be working on schedulerProConfig. Have you added the required the entry in the markup file i.e. app.component.html.

[valereimann]

Hi,

thank you for the quick answer, but I still can't find it. Here is part of my config file:

export const schedulerProConfig: Partial<SchedulerProConfig> = {
	listeners: {
    beforeEventResizeFinalize: async ({context, eventRecord}) => {
      		// Code that gets executed when Resize
    },
    beforeEventDropFinalize: async ({context}) => {
            	// Code that gets executed when DropFinalize
    },
    beforePaste: async ({eventRecords, assignmentRecords, resourceRecord}) => {
                  // Code that gets executed when Paste
    },
    beforeEventDelete: async ({eventRecords}) => {
                 // Code that gets executed when Delete
    },
    onColumnCollapseToggle({ source, column }) {
      // Code isn't executed when I toggle a column Group
    },
  },
}

And here is the html:

<bryntum-scheduler-pro
  #schedulerpro
  [project]="project"

  [startDate]="getStartDate()"
  [endDate]="getEndDate()"

  [listeners]="schedulerProConfig.listeners"

  [snap]="schedulerProConfig.snap"

  [columns]="schedulerProConfig.columns!"
  [height]="schedulerProConfig.height"
  [viewPreset]="viewPreset"
  [features]="schedulerProConfig.features"
  [createEventOnDblClick]="schedulerProConfig.createEventOnDblClick"

  [eventRenderer]="schedulerProConfig.eventRenderer"
  [overlappingEventSorter]="schedulerProConfig.overlappingEventSorter"

  [eventLayout]="schedulerProConfig.eventLayout"
  [rowHeight]="schedulerProConfig.rowHeight"

  [tbar]="schedulerProConfig.tbar"
</bryntum-scheduler-pro>

is there soemthing I'm missingg?

I also tried to not include it in the listener, so one level above with:

export const schedulerProConfig: Partial<SchedulerProConfig> = {
	 onColumnCollapseToggle({ source, column }) {
          	// Code isn't executed when I toggle a column Group
  },
}

and in the html:

  (onToggleGroup)="schedulerProConfig.onToggleGroup"

But that also doesn't trigger it.

[ghulam.ghous]

In the listeners, you cannot use onFunctions. so it should be:

    columnCollapseToggle({ source, column }) {
      // Code isn't executed when I toggle a column Group
    },

Please try this.

[valereimann]

I tried it, but it still doesn't execute the code inside or stop with a breakpoint.

[ghulam.ghous]

Hi there,

I have tried this in our demo and yes you are right it never gets triggered. We will investigate this here: https://github.com/bryntum/support/issues/9724. Though I tried adding using the console and then it works. So please use this workaround for now:

// Add this in ngAfterViewInit:
        this.schedulerPro.on('columnCollapseToggle', (e: any) => {
            console.log(e);
        });

inline-data 3.zip

(199.95 KiB) Downloaded 13 times

[valereimann]

Hello,

thank you for the Files. I'm having problems using the (onColumnCollapseToggle) tag in the html. I get a red markup, when I use it (Event onColumnCollapseToggle is not emitted by any applicable directives nor by <bryntum-scheduler-pro> element).

What could the cause be?

[ghulam.ghous]

Can you please share the code, how you are using it?