Update the resources in the timeline view

[Pieter-Jan]

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

[Karthigeyan Krishnamurthi]

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 

 

[Pieter-Jan]

Hi,

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

Thanks in advance.

[Karthigeyan Krishnamurthi]

Hi Pieter,  

 

Thanks for your update. 

 

We have prepared the below sample to load the resource based on the events. 

http://www.syncfusion.com/downloads/support/forum/144301/ze/Sample-168728504  

 

Regards, 

Karthi