We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Update the resources in the timeline view

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');
        });





3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team April 30, 2019 10:25 AM UTC

Hi Pieter, 
 
Greetings from Syncfusion. 
 
We suspect that your requirement is to render the resources based on its event. For example in Day view if April 30 has 2 events for 2 resource then only that 2 resource should be rendered. If the view is changed to May 1 where there are 3 events for 3 resource then that 3 resources should be rendered regardless of April 30 resources. Please confirm it to proceed further and if we misunderstood your requirement share image / demo. 
 
Regards, 
Karthi 
 



PI Pieter-Jan April 30, 2019 10:27 AM UTC

Hi,

Yes, that is the case. So each event would actually be a separate resource.

Thanks in advance.


KK Karthigeyan Krishnamurthi Syncfusion Team May 2, 2019 11:48 AM UTC

Hi Pieter,  
 
Thanks for your update. 
 
We have prepared the below sample to load the resource based on the events. 
 
Regards, 
Karthi 


Loader.
Live Chat Icon For mobile
Up arrow icon