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 : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Resources not displayed

Thread ID:

Created:

Updated:

Platform:

Replies:

128942 Feb 17,2017 09:21 AM UTC Feb 21,2017 05:06 AM UTC Aurelia 3
loading
Tags: ejSchedule
Dennis Keller
Asked On February 17, 2017 09:21 AM UTC

Hi,

I am currently searching for some new UI components for my new aurelia project and found the nice looking one's here. I was trying around a bit with the schedule control and it worked very nice until I tried to add resources. Unfortunately the resources are not displayed. Find the code of my template and viewmodel below. Am I missing something or doing something wrong?

Thank you for some advice.

schedule.html
<template>    
    <div>
        <ej-schedule id="Schedule1" e-width="100%" e-height="575px" e-show-appointment-navigator="false" e-orientation="horizontal"
        e-show-all-day-row="false" e-show-current-time-indicator="false" e-resources.bind="ResourceList" e-views.bind="AvailableViews"
        e-time-scale.bind="TimeScale" e-show-next-prev-month="false" e-current-view.bind="CurrentView" e-render-dates.bind="RenderDates"
        e-appointment-settings.bind="AppointmentList" e-current-date.bind="CurrentDate">
        </ej-schedule>
    </div>
</template>

schedule.js
export class DefaultSchedule {
  constructor() {

    this.Orientation = "horizontal";
    this.AvailableViews =  ["Month", "CustomView", "Agenda"];
    this.CurrentView = "CustomView";
    this.RenderDates = {
      start: new Date(2017, 1, 7),
      end: new Date(2017, 2, 14)
    };

    this.TimeScale = {
      enable: false
    };
    this.CurrentDate = new Date(2017, 1, 14);

    var appointmentData = [
      {
        Id: 100,
        Subject: "Mr. & Mrs. Schmidt",
        StartTime: "2017/2/15 14:00:00",
        EndTime: "2017/2/18 10:00:00",
        roomId: 5
      }, {
        Id: 101,
        Subject: "Mr. & Mrs. Smiso",
        StartTime: "2017/2/16 14:00:00",
        EndTime: "2017/2/19 10:00:00",
        roomId: 3
      }, {
        Id: 102,
        Subject: "Mr. & Mrs. Smith",
        StartTime: "2017/2/11 14:00:00",
        EndTime: "2017/2/18 10:00:00",
        roomId: 1
      }];

    this.AppointmentList = {

      // Schedule appointment dataSource
      dataSource: appointmentData,

      // Schedule dataSource field mapping
      id: "Id",
      subject: "Subject",
      startTime: "StartTime",
      endTime: "EndTime",
      resourceFields: "roomId"
    };

    var resourceData = [
      {
        roomName: "R100",
        id: 1,
        etage: 1
      }, {
        roomName: "R101",
        id: 2,
        etage: 1
      }, {
        roomName: "R102",
        id: 3,
        etage: 1
      }, {
        roomName: "R200",
        id: 4,
        etage: 2
      }, {
        roomName: "R201",
        id: 5,
        etage: 2
      }, {
        roomName: "R202",
        id: 6,
        etage: 2
      }, {
        roomName: "R203",
        id: 7,
        etage: 2
      }];

    this.ResourceList = [{
      resourceSettings: {
        text: "roomName",
        id: "id",
        dataSource: resourceData
      },
      field: "roomId",
      title: "Room(s)",
      name: "rooms",
      allowMultiple: false
    }];
  }
}

Mahesh Palanisamy [Syncfusion]
Replied On February 20, 2017 12:09 PM UTC

Hi Dennis, 
 
Thank you for contacting Syncfusion support. 
 
We have analyzed your provided code and found that you have missed to define the ‘e-group’ property which could be the cause of the reported issue. Kindly refer the below code -  
 
<Code> 
schedule.html  
<template>     
    <div> 
        <ej-schedule id="Schedule1" e-width="100%" e-height="575px" e-show-appointment-navigator="false" e-orientation="horizontal" 
        e-show-all-day-row="false" e-show-current-time-indicator="false" e-resources.bind="ResourceList" e-group.bind="Group" e-views.bind="AvailableViews" 
        e-time-scale.bind="TimeScale" e-show-next-prev-month="false" e-current-view.bind="CurrentView" e-render-dates.bind="RenderDates" 
        e-appointment-settings.bind="AppointmentList" e-current-date.bind="CurrentDate"> 
        </ej-schedule> 
    </div> 
</template> 
 
schedule.js 
export class DefaultSchedule { 
    constructor() { 
 
this.Group = { 
        resources: ['rooms'] 
    }; 
 
} 
} 
</Code> 
 
Using the same code snippet, we have prepared the sample which can be downloaded from the below location: 

Kindly follow the below steps to run the sample, 

1.       Navigate to project folder  
2.       npm install 
3.       jspm install 
4.       gulp watch 
5.       Browse to http://localhost:9000 to see the sample. 

Kindly check the above sample and let us know, if you need any further assistance on this. 

Regards, 
Mahesh 


Dennis Keller
Replied On February 20, 2017 08:47 PM UTC

Perfect. Thank you very much for the quick answer Mahesh.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 21, 2017 05:06 AM UTC

Hi Dennis,  
 
Thanks for your update. 
 
Please let us know if you need further assistance. 
 
Regards, 
Karthigeyan 


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.

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

;