How to group multiple resources in a timeline showing each row as different datasources

[Alexander Claesson]

Hi, I have this 2 datasources.

public personalDataSource = [

{ text: 'Alice', id: 1, color: '#1aaa55' },

{ text: 'Bob', id: 2, color: '#357cd2' },

{ text: 'Charlie', id: 3, color: '#7fa900' }

];

public roomDataSource = [

{ text: 'Conference Room A', id: 1, color: '#f8a398' },

{ text: 'Conference Room B', id: 2, color: '#7499e1' }

];

EventSettingsModel =

public eventSettings: EventSettingsModel = {

dataSource: [

{

Id: 1,

Subject: 'Manual Testing',

StartTime: new Date(2024, 1, 26, 9, 15),

EndTime: new Date(2024, 1, 26, 11, 45),

PersonalId: [1, 2], // Event for Alice and Bob

RoomId: 1 // Event in Room A

},

{

Id: 2,

Subject: 'Room Setup',

StartTime: new Date(2024, 1, 26, 11, 0),

EndTime: new Date(2024, 1, 26, 12, 30),

PersonalId: [2], // Event for Bob

RoomId: 2 // Event in Room B

}

]

};

and this group:

public group: GroupModel = {

resources: ['Personals', 'Rooms']

};

my template:

<ejs-schedule #scheduleObj width='100%' height='650px'

[selectedDate]="selectedDate" [group]="group" [workDays]="workDays" [eventSettings]="eventSettings">

<e-resources>

<e-resource

field='PersonalId'

title='Personal'

name='Personals'

[allowMultiple]='true'

[dataSource]='personalDataSource'

textField='text'

idField='id'

colorField='color'>

</e-resource>

<e-resource

field='RoomId'

title='Room'

name='Rooms'

[allowMultiple]='false'

[dataSource]='roomDataSource'

textField='text'

idField='id'

colorField='color'>

</e-resource>

</e-resources>

<e-views>

<e-view option="TimelineDay"></e-view>

<e-view option="TimelineWeek"></e-view>

<e-view option="TimelineWorkWeek"></e-view>

<e-view option="TimelineMonth"></e-view>

<e-view option="Agenda"></e-view>

</e-views>

</ejs-schedule>

I want to show all the personals AND rooms events on different rows using timeline schedule view.

Now it only works when only have one resource, and not both.

Is this possible to achieve in EJ2 Angular Syncfusion?

[Swathi Ravi]

Hi Alexander Claesson,

Thank you for reaching out to us!

It is possible to group Scheduler resources at multiple levels by mapping child resources to their respective parent resources. For two levels of resources, the second-level resources need to be defined with a groupID that maps to the first-level resource’s ID to establish the parent-child relationship.

We noticed that you haven't provided the groupID field. Please ensure it is included for proper resource grouping.

Refer the below shared UG for more detailed information,

https://ej2.syncfusion.com/angular/documentation/schedule/resources#grouping-multi-level-resources

https://ej2.syncfusion.com/angular/demos/#/tailwind3/schedule/timeline-resource-grouping

Regards,

Swathi