[INFO REQ] how to make resources collapsible ?

[akshayo9]

Hi Team,
I have a requirement where I need to make few selected resources as collapsible. These resources will/might have multiple jobs in hand at the same time. And in the collapsible view I would ideally want to show how many jobs are assigned to the resource in the particular time slot. I could not find this is documentation. I could find this example
https://www.bryntum.com/examples/scheduler/resource-collapsing/

but there are 2 problems, 1 it doesn't make a particular resource collapsible instead make all of them collapsible. 2 it does not show number of jobs assigned in a particular time frame instead shows how all jobs assigned side by side.

Is there any solution to this? Any help is greatly appreciated?

[mats]

Could you please provide more details and a screenshot showing how you want things to look?

[akshayo9]

screenshot.png (101.54 KiB) Viewed 1099 times

Hi Mat,
I would need something on this line.

Here you can see that not all the resources are collapsible. Only few of them are (based on certain property). Also you can see where arrow is pointing towards, there number of events are listed in the collapsed view (because that resource will be handling 2 jobs at the same time. In expanded view the information of the jobs(appointments in this case) will be shown.

[alex.l]

It is not supported out of the box, but you could try to implement it.

As a start point, use https://bryntum.com/docs/scheduler/api/Scheduler/column/ResourceCollapseColumn and custom https://bryntum.com/docs/scheduler/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer

As a start point:

eventRenderer({ eventRecord, resourceRecord }) {
        const overlapCount = resourceRecord.events.filter(e => e !== eventRecord && e.startDate < eventRecord.endDate && e.endDate > eventRecord.startDate).length;

    return overlapCount;
}

[akshayo9]

Hi Alex, thanks for the reply.
I have 2 questions here,

1. event though I am providing
   { type : 'resourceCollapse' }

   inside column but it doesn't seem to work for me. it stops loading the scheduler for me as soon as I provide this property.
2. Also I do not want all the resource to be collapsible but only few resources based on a certain property of the resource.

[alex.l]

Hi akshayo9,

it stops loading the scheduler

How to reproduce that?

Also I do not want all the resource to be collapsible but only few resources based on a certain property of the resource

For this you probably have to create your own column type and add a checking into renderer and onCellClick method. Check the source code of ResourceCollapseColumn.js, it's pretty easy to implement.

[akshayo9]

How to reproduce that?

I am not able to reproduce that in code pen. can this be because of version difference ? I am using 3.1.5. and not able to see the option to update version in code pen.

and to add my own column type ? do you have any example to follow along ?

[alex.l]

It may be because of version difference. Try to upgrade your app. We cannot help a lot if we don't see an error locally and not able to debug it...

For example how to add new column type, check the code of this demo https://bryntum.com/examples/grid/columntypes/
And docs https://bryntum.com/docs/scheduler/api/Grid/data/ColumnStore#function-registerColumnType-static

[akshayo9]

Hi Alex, It worked after upgrading, thanks.
One more doubt, is there any way that I can leverage "resourceCollapse" type in the new column type, if yes, can you please provide any example for that. If no, is there any way that rows can be programmatically collapsed/expanded?

[alex.l]

Try to use the same type in your new column class and call ColumnStore.registerColumnType(YourColumnClass);
https://bryntum.com/docs/scheduler/api/Grid/data/ColumnStore#function-registerColumnType-static

is there any way that rows can be programmatically collapsed/expanded?

Check ResourceCollapseColumn.js.

record.eventLayout = record.eventLayout !== 'none' ? 'none' : 'stack';