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

Adding a resourceHeaderTemplate stops the content from rendering

Thread ID:

Created:

Updated:

Platform:

Replies:

143870 Apr 8,2019 03:50 PM UTC Apr 9,2019 01:28 PM UTC Angular - EJ 2 1
loading
Tags: Schedule
Pieter-Jan
Asked On April 8, 2019 03:50 PM UTC

I am trying to recreate a similar solution like the one in your documentation: Room scheduler
The component is rendering and the data is shown when I don't use the resourceHeaderTemplate. If I add this, I only see the header of the Schedule component and can't do anything else. While rendering, I don't receive any errors, only when I click something (change the date for example) are there errors that 'str.replace is not a function'.

I am using the same data as in the documentation and the code is also the same.

This is my template:

<ejs-schedule #timelineSchedule
              [selectedDate]="selectedDate"
              [eventSettings]="eventSettings"
              [timeScale]="timeScale"
              [group]="group"
              (eventRendered)="onEventRendered($event)"
              (actionBegin)="onActionBegin($event)"
              (renderCell)="onRenderCell($event)"
              (popupOpen)="onPopupOpen($event)">
  <e-resources>
    <e-resource field='RoomId' [dataSource]='resourceDataSource' idField='id' colorField='color' textField='text' name='MeetingRoom' [allowMultiple]='allowMultiple'></e-resource>
  </e-resources>
  <e-views>
    <e-view option="TimelineDay"></e-view>
  </e-views>
  <ng-template #resourceHeaderTemplate let-data>
    <div class='template-wrap'>
      <div class="name">{{data.resourceData.text}}</div>
      <div class="type">{{data.resourceData.type}}</div>
      <div class="capacity">{{data.resourceData.capacity}}</div>
    </div>
  </ng-template>
</ejs-schedule>

And this is the component:

import { Component, OnInit, Inject, ViewChild, ViewEncapsulation } from '@angular/core';
import { ScheduleComponent, ActionEventArgs, PopupOpenEventArgs, EventRenderedArgs, RenderCellEventArgs, DragAndDropService,
  TimelineViewsService, GroupModel, EventSettingsModel, ResizeService, TimeScaleModel, WorkHoursModel, View } from '@syncfusion/ej2-angular-schedule';
import { extend, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';

@Component({
  selector: 'app-timeline-table',
  templateUrl: './timeline-table.component.html',
  styleUrls: ['./timeline-table.component.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [TimelineViewsService, ResizeService, DragAndDropService]
})
export class TimelineTableComponent {
  public selectedDate: Date = new Date(2018, 7, 1);
  public timeScale: TimeScaleModel = { interval: 60, slotCount: 1 };
  public workHours: WorkHoursModel = { start: '08:00', end: '18:00' };
  public currentView: View = 'TimelineDay';
  public group: GroupModel = {
    enableCompactView: false,
    resources: ['MeetingRoom']
  };
  public resourceDataSource: Object[] = [
    { text: 'Jammy', id: 1, color: '#ea7a57', capacity: 20, type: 'Conference' },
    { text: 'Tweety', id: 2, color: '#7fa900', capacity: 7, type: 'Cabin' },
    { text: 'Nestle', id: 3, color: '#5978ee', capacity: 5, type: 'Cabin' },
    { text: 'Phoenix', id: 4, color: '#fec200', capacity: 15, type: 'Conference' },
    { text: 'Mission', id: 5, color: '#df5286', capacity: 25, type: 'Conference' },
    { text: 'Hangout', id: 6, color: '#00bdae', capacity: 10, type: 'Cabin' },
    { text: 'Rick Roll', id: 7, color: '#865fcf', capacity: 20, type: 'Conference' },
    { text: 'Rainbow', id: 8, color: '#1aaa55', capacity: 8, type: 'Cabin' },
    { text: 'Swarm', id: 9, color: '#df5286', capacity: 30, type: 'Conference' },
    { text: 'Photogenic', id: 10, color: '#710193', capacity: 25, type: 'Conference' }
  ];
  public allowMultiple: Boolean = true;
  public eventSettings: EventSettingsModel = {
    dataSource: <Object[]>extend([], roomData, null, true),
    fields: {
      id: 'Id',
      subject: { title: 'Summary', name: 'Subject' },
      location: { title: 'Location', name: 'Location' },
      description: { title: 'Comments', name: 'Description' },
      startTime: { title: 'From', name: 'StartTime' },
      endTime: { title: 'To', name: 'EndTime' }
    }
  };

  @ViewChild('scheduleObj')
  public scheduleObj: ScheduleComponent;

  constructor() { }

  isReadOnly(endDate: Date): boolean {
        return (endDate < new Date(2018, 6, 31, 0, 0));
    }

    onPopupOpen(args: PopupOpenEventArgs): void {
        let data: { [key: string]: Object } = <{ [key: string]: Object }>args.data;
        if (args.type === 'QuickInfo' || args.type === 'Editor' || args.type === 'RecurrenceAlert' || args.type === 'DeleteAlert') {
            let target: HTMLElement = (args.type === 'RecurrenceAlert' ||
                args.type === 'DeleteAlert') ? (args.data as any).element[0] : args.target;
            if (!isNullOrUndefined(target) && target.classList.contains('e-work-cells')) {
                if ((target.classList.contains('e-read-only-cells')) ||
                    (!this.scheduleObj.isSlotAvailable(data.startTime as Date, data.endTime as Date, data.groupIndex as number))) {
                    args.cancel = true;
                }
            } else if (!isNullOrUndefined(target) && target.classList.contains('e-appointment') &&
                (this.isReadOnly(data.EndTime as Date))) {
                args.cancel = true;
            }
        }
    }

    onActionBegin(args: ActionEventArgs): void {
        if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {
            let data: { [key: string]: Object } = args.data as { [key: string]: Object };
            let groupIndex: number = this.scheduleObj.eventBase.getGroupIndexFromEvent(data);
            if (!this.scheduleObj.isSlotAvailable(data.StartTime as Date, data.EndTime as Date, groupIndex as number)) {
                args.cancel = true;
            }
        }
    }

    onRenderCell(args: RenderCellEventArgs): void {
        if (args.element.classList.contains('e-work-cells')) {
            if (args.date < new Date(2018, 6, 31, 0, 0)) {
                args.element.setAttribute('aria-readonly', 'true');
                args.element.classList.add('e-read-only-cells');
            }
        }
        if (args.elementType === 'resourceHeader') {
          args.element.innerHTML = '<div><p>' + this.resourceDataSource[args.groupIndex]['text'] + '</p><p>' + this.resourceDataSource[args.groupIndex]['capacity'] + ' ' + this.resourceDataSource[args.groupIndex]['type'] + '</p></div>'
        }
    }

    onEventRendered(args: EventRenderedArgs): void {
        let data: { [key: string]: Object } = args.data;
        if (this.isReadOnly(data.EndTime as Date)) {
            args.element.setAttribute('aria-readonly', 'true');
            args.element.classList.add('e-read-only');
        }
    }

}

Hareesh Balasubramanian [Syncfusion]
Replied On April 9, 2019 01:28 PM UTC

Hi Pieter, 

Greetings from Syncfusion solution. 

We have checked the shared code and prepared sample based on it in which schedular renders properly. We have shared the sample for your reference which can be viewed from the following link. 

Note: In your shared code id mapping is wrong for schedular instance. 

  @ViewChild('timelineSchedule'
  public scheduleObj: ScheduleComponent; 

Please try the above sample and if the issue persist kindly try to reproduce the issue in the sample. 

Regards, 
Hareesh B 


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