Resources never load

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: <ejs-schedule width="100%" height="500px" [group] = "group" [selectedDate]="selectedDate" [readonly]="true" [views]="views"
[eventSettings]="eventSettings">
<e-resources>
    <e-resource field="RoomId" title="Room" name="Rooms"
      [dataSource]="roomDataSource" [allowMultiple]="allowMultipleRoom"
      textField='text' idField='id'colorField="color" ></e-resource>
  </e-resources>

    </ejs-schedule>

This is my code for app.component.ts:
import { ComponentViewEncapsulation } from '@angular/core';
import { EventSettingsModelTimelineViewsServiceGroupModelfrom '@syncfusion/ej2-angular-schedule';
import {scheduleDatafrom './datasource'

@Component({
  selector: 'app-timeline',
  providers: [TimelineViewsService],
  templateUrl: './timeline.component.html',
  styleUrls: ['./timeline.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class TimelineComponent{
  
  
  public selectedDateDate = new Date(201831);
    public eventSettingsEventSettingsModel = { dataSource: scheduleData }
   
    public viewsArray<string> = ['TimelineDay'];
    public groupGroupModel = { resources: ['Rooms'] };
    public allowMultipleRoomBoolean = true;
    
    public roomDataSourceObject[] = [
      { text: 'ROOM 1'id: 1color: '#cb6bb2' },
      { text: 'ROOM 2'id: 2color: '#56ca85' }
    ];
    constructor() { }}
This is datasource.ts:
export let scheduleDataObject[] = [
    {
        Id: 1,
        Subject: 'Incoming Message',
        StartTime: new Date(201831930),
        EndTime: new Date(201831120),
        RoomId:1
    }, {
        Id: 2,
        Subject: 'Incoming Message',
        StartTime: new Date(2018311230),
        EndTime: new Date(2018311445),
        RoomId:2 
    }, {
        Id: 3,
        Subject: 'Quality Analysis',
        StartTime: new Date(201832100),
        EndTime: new Date(2018321230),
        IsAllDay: false,
        RoomId: 1
    }, {
        Id: 4,
        Subject: 'Resource planning',
        StartTime: new Date(201832130),
        EndTime: new Date(2018321530),
        IsAllDay: false,
        RoomId: 2
    }, {
        Id: 5,
        Subject: 'Timeline estimation',
        StartTime: new Date(20183390),
        EndTime: new Date(2018331130),
        IsAllDay: false,
        RoomId: 1
    }, {
        Id: 6,
        Subject: 'Developers Meeting',
        StartTime: new Date(201833140),
        EndTime: new Date(2018331645),
        IsAllDay: false,
        RoomId: 2
    }, {
        Id: 7,
        Subject: 'Project Review',
        StartTime: new Date(2018341115),
        EndTime: new Date(2018341330),
        IsAllDay: false,
        RoomId: 1
    }, {
        Id: 8,
        Subject: 'Manual testing',
        StartTime: new Date(201834915),
        EndTime: new Date(2018341145),
        IsAllDay: false,
        RoomId: 2
    }, {
        Id: 9,
        Subject: 'Project Preview',
        StartTime: new Date(201835930),
        EndTime: new Date(2018351245),
        IsAllDay: false,
        RoomId: 1
    }, {
        Id: 10,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2018351345),
        EndTime: new Date(2018351630),
        IsAllDay: false,
        RoomId: 2
    }];

Kindly let me know how can I fix this issue?

5 Replies 1 reply marked as answer

HB Hareesh Balasubramanian Syncfusion Team October 29, 2020 07:47 AM UTC

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. 

<ejs-schedule 
  width="100%" 
  height="500px" 
  [group]="group" 
  [selectedDate]="selectedDate" 
  [readonly]="true" 
  [eventSettings]="eventSettings" 
  <e-resources> 
                <e-resource 
                  field="RoomId" 
                  title="Room" 
                  name="Rooms" 
                  [dataSource]="roomDataSource" 
                  [allowMultiple]="allowMultipleRoom" 
                  textField="text" 
                  idField="id" 
                  colorField="color" 
                ></e-resource> 
  </e-resources> 
  <e-views> 
                <e-view option="TimelineDay"></e-view> 
                <e-view option="TimelineWeek"></e-view> 
                <e-view option="TimelineWorkWeek"></e-view> 
  </e-views> 
</ejs-schedule> 

Kindly refer to the below UG link, 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh 



RA Ramsha October 29, 2020 08:41 PM UTC

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. 


NR Nevitha Ravi Syncfusion Team October 30, 2020 06:14 AM UTC

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. 

Kindly try the solution if the issue persist still kindly share the issue replicating sample to validate the issue further. 

Regards, 
Nevitha  



RA Ramsha October 30, 2020 03:14 PM UTC

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)


HB Hareesh Balasubramanian Syncfusion Team November 2, 2020 12:48 PM UTC

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. 


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 


Marked as answer
Loader.
Up arrow icon