I'm following the 'Room Scheduler' example to create a similar view. (https://ej2.syncfusion.com/javascript/demos/#/material/schedule/timeline-resources.html)
However, instead of using a static 'rooms' resource, I need to get data from my events data source to change the left side of the timeline (with the rooms).
For example, say I have 3 events on the 29th of april. After loading these events, my rooms would change according to the data retrieved in the events. When we browse to the 30th of april, there are 5 other rooms, so the view changes so there are 5 Text fields on the left side.
When loading the events, the content of the resourceManager need to
change to the Text, Id, and Color field of the scheduleData. I tried the
addResource method in the dataBinding event, but than the event kept
reloading.
Is it possible to update the resource when the events are updated so my view changes dynamically?
I am using my datamanager like this:
$(function() {
var startDate = new Date();
var url = $("#parametersDiv").data("url");
var resourceManager = [
{ Text: 'Loading...', Id: 1, Color: '#98AFC7' }
];
var data = new ejs.data.DataManager({
url: url,
adaptor: new ejs.data.UrlAdaptor(),
headers: [
{
'Access-Control-Allow-Origin': '*'
}
]
});
scheduleObj = new ejs.schedule.Schedule({
eventSettings: {
dataSource: data,
query: new ejs.data.Query()
.addParams('search', '')
},
group: {
enableCompactView: false,
resources: ['Employees']
},
resources: [
{
field: 'Id',
title: 'Employee',
name: 'Employees',
allowMultiple: true,
dataSource: resourceManager,
textField: 'Text',
idField: 'Id',
colorField: 'Color'
}
],
width: '100%',
views: [
{ option: 'TimelineDay' }
],
timeScale: {
slotCount: 1,
interval: 60
},
workHours: {
start: '08:00',
end: '22:00'
},
rowAutoHeight: true,
dataBinding: function(e) {
var items = e.result.data;
if (items.length > 0) {
for (var i = 0; i < items.length; i++) {
var event = items[i];
var when = event.StartTime;
var start = event.StartTime;
var end = event.EndTime;
if (!when) {
when = event.StartTime.date;
start = event.StartTime.date;
end = event.EndTime.date;
}
scheduleData.push({
Id: event.Id,
Subject: event.Subject,
StartTime: new Date(start),
EndTime: new Date(end),
Text: event.Subject,
Color: '#98AFC7'
});
}
}
e.result = scheduleData;
}
});
scheduleObj.appendTo('#timeline-schedule');
});
