Resources never load

Question

I am trying to create resources in a schedule (sample code as given on syncfusion's website) but the resources never load. This is my code for app.component.html:

This is my code for app.component.ts:

import { Component, ViewEncapsulation } from '@angular/core';

import { EventSettingsModel, TimelineViewsService, GroupModel} from '@syncfusion/ej2-angular-schedule';

import {scheduleData} from './datasource'

@Component({

selector: 'app-timeline',

providers: [TimelineViewsService],

templateUrl: './timeline.component.html',

styleUrls: ['./timeline.component.css'],

encapsulation: ViewEncapsulation.None

})

export class TimelineComponent{

public selectedDate: Date = new Date(2018, 3, 1);

public eventSettings: EventSettingsModel = { dataSource: scheduleData }

public views: Array<string> = ['TimelineDay'];

public group: GroupModel = { resources: ['Rooms'] };

public allowMultipleRoom: Boolean = true;

public roomDataSource: Object[] = [

{ text: 'ROOM 1', id: 1, color: '#cb6bb2' },

{ text: 'ROOM 2', id: 2, color: '#56ca85' }

];

constructor() { }}

This is datasource.ts:

export let scheduleData: Object[] = [

{

Id: 1,

Subject: 'Incoming Message',

StartTime: new Date(2018, 3, 1, 9, 30),

EndTime: new Date(2018, 3, 1, 12, 0),

RoomId:1

}, {

Id: 2,

Subject: 'Incoming Message',

StartTime: new Date(2018, 3, 1, 12, 30),

EndTime: new Date(2018, 3, 1, 14, 45),

RoomId:2

}, {

Id: 3,

Subject: 'Quality Analysis',

StartTime: new Date(2018, 3, 2, 10, 0),

EndTime: new Date(2018, 3, 2, 12, 30),

IsAllDay: false,

RoomId: 1

}, {

Id: 4,

Subject: 'Resource planning',

StartTime: new Date(2018, 3, 2, 13, 0),

EndTime: new Date(2018, 3, 2, 15, 30),

IsAllDay: false,

RoomId: 2

}, {

Id: 5,

Subject: 'Timeline estimation',

StartTime: new Date(2018, 3, 3, 9, 0),

EndTime: new Date(2018, 3, 3, 11, 30),

IsAllDay: false,

RoomId: 1

}, {

Id: 6,

Subject: 'Developers Meeting',

StartTime: new Date(2018, 3, 3, 14, 0),

EndTime: new Date(2018, 3, 3, 16, 45),

IsAllDay: false,

RoomId: 2

}, {

Id: 7,

Subject: 'Project Review',

StartTime: new Date(2018, 3, 4, 11, 15),

EndTime: new Date(2018, 3, 4, 13, 30),

IsAllDay: false,

RoomId: 1

}, {

Id: 8,

Subject: 'Manual testing',

StartTime: new Date(2018, 3, 4, 9, 15),

EndTime: new Date(2018, 3, 4, 11, 45),

IsAllDay: false,

RoomId: 2

}, {

Id: 9,

Subject: 'Project Preview',

StartTime: new Date(2018, 3, 5, 9, 30),

EndTime: new Date(2018, 3, 5, 12, 45),

IsAllDay: false,

RoomId: 1

}, {

Id: 10,

Subject: 'Cross-browser testing',

StartTime: new Date(2018, 3, 5, 13, 45),

EndTime: new Date(2018, 3, 5, 16, 30),

IsAllDay: false,

RoomId: 2

}];

Kindly let me know how can I fix this issue?

Hareesh Balasubramanian · Accepted Answer

Hi Ramsha, 

Thanks for the update. 

We have validated your shared error snippets at our end and prepared a sample using resources but unfortunately, we  were not able to replicate your reported problem at our end which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-timeline-resource?file=app.component.ts  

Kindly try the above sample at your side and if the issue still persists at your end kindly share the below details to serve you better?  
  

Replicate the issue in the above sample
Share the issue replicating sample (if possible)

Regards, 
Hareesh

Hareesh Balasubramanian · Answer

Hi Ramsha, Greetings from Syncfusion Support..! We have analyzed your shared code snippets in which you have missed to define scheduler views in tag level which could cause the reported problem. By default scheduler will render in vertical views, if we haven’t define views but you have missed to inject the necessary modules to render vertical view, so the sample is not working at your end. We have prepared a timeline resource scheduler sample using your snippets which can be viewed from the following link. https://stackblitz.com/edit/angular-timeline-resource?file=app.component.ts

Kindly refer to the below UG link, https://ej2.syncfusion.com/angular/documentation/schedule/views/#timeline-views--day-week-work-week Kindly try the above solution and get back to us if you need any further assistance. Regards, Hareesh

Ramsha · Answer

I included views in app.component.html as you have suggested but the resources still don't load. In my initial code I did include [views] field inside ejs-schedule

tag. The page continues to appears like this when I try the suggested code with e-views

tag:

I am not sure why this keeps happening.

Nevitha Ravi · Answer

Hi Ramsha, 

Thanks for your update. 

We suspect that node_modules is not installed properly in your application which could cause the reported problem. Can you please delete @syncfusion folder and install the npm and try again? We have prepared a sample with your shared code which is working properly. 
https://stackblitz.com/edit/timeline-resource?file=app.component.ts  

Kindly try the solution if the issue persist still kindly share the issue replicating sample to validate the issue further. 

Regards, 
Nevitha

Ramsha · Answer

Hi, thank you for your reply. I uninstalled @synfusion module and reinstalled it but the issue still persists. This is the message I receive on the console when it tried to load the resources:

core.js:4197 ERROR TypeError: Cannot read property 'generateResourceLevels' of null

at TimelineViews.generateColumnLevels (ej2-schedule.es2015.js:19433)

at TimelineViews.renderLayout (ej2-schedule.es2015.js:17308)

at Render.initializeLayout (ej2-schedule.es2015.js:9496)

at Render.initializeLayout (ej2-schedule.es2015.js:9466)

at Render.render (ej2-schedule.es2015.js:9406)

at ComponentBase.initializeView (ej2-schedule.es2015.js:11729)

at ComponentBase.renderElements (ej2-schedule.es2015.js:11568)

at ComponentBase.initializeResources (ej2-schedule.es2015.js:11550)

at ComponentBase.render (ej2-schedule.es2015.js:11393)

at ComponentBase.appendTo (ej2-base.es2015.js:5412)