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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Update the resources in the timeline view

Thread ID:

Created:

Updated:

Platform:

Replies:

144301 Apr 29,2019 05:59 PM UTC May 2,2019 11:48 AM UTC JavaScript - EJ 2 3
loading
Tags: Schedule
Pieter-Jan
Asked On April 29, 2019 05:59 PM UTC

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 [Syncfusion]
Replied On 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 
 


Pieter-Jan
Replied On 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.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon