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.
Unfortunately, activation email could not send to your email. Please try again.

Resources not displayed

Thread ID:

Created:

Updated:

Platform:

Replies:

128942 Feb 17,2017 04:21 AM Feb 21,2017 12:06 AM Aurelia 3
loading
Tags: ejSchedule
Dennis Keller
Asked On February 17, 2017 04:21 AM

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 07:09 AM

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 03:47 PM

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

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

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.

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.

;