1. Home
  2. Forum
  3. Angular - EJ 2
  4. Custom editor with resources

Custom editor with resources

Hi.

I have a schedule with resources and I need to customize editor.

I read documentation
https://ej2.syncfusion.com/angular/documentation/schedule/editor-template.html

and all fields works fine, but I don't know how map resources into a dropdown and set selected current resource.

Thank you!



1 Reply
AA Arulraj A Syncfusion Team September 5, 2018 10:33 AM UTC

Hi Luis, 

Thanks for contacting Syncfusion support. 

We have prepared the sample to meet your requirement adding resources in editor template and displaying current resource in that, which can be downloaded from the following location. 

Please refer to the following code example used in the above sample to meet your requirement. 

app.component.html page: 


<div class="control-section"> 
    <ejs-schedule #scheduleObj width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" [group]="group" (actionBegin)="onActionBegin($event)" 
        (popupOpen)="onPopupOpen($event)" (eventRendered)="onEventRendered($event)" [showQuickInfo]="showQuickInfo"> 
        <e-resources> 
            <e-resource field='AirlineId' title='Airline Name' name='Airlines' [allowMultiple]='allowMultiple' [dataSource]='resourceDataSource' 
                textField='AirlineName' idField='AirlineId' colorField='AirlineColor'> 
            </e-resource> 
        </e-resources> 
        <e-views> 
            <e-view option="Day"></e-view> 
            <e-view option="Week"></e-view> 
            <e-view option="WorkWeek"></e-view> 
            <e-view option="Month"></e-view> 
        </e-views> 
        <ng-template #editorTemplate> 
            <table class="custom-event-editor" width="100%" cellpadding="5"> 
                <tbody> 
                    <tr> 
                        <td class="e-textlabel">Service By:</td> 
                        <td colspan="4"> 
                            <input id="AirlineId" class="e-field e-input" type="text" value="" name="AirlineId" style="width: 100%" /> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="e-textlabel">Summary</td> 
                        <td colspan="4"> 
                            <input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" /> 
                        </td> 
                    </tr> 
                    -------------------- 
                    -------------------- 
                    -------------------- 
                </tbody> 
            </table> 
        </ng-template> 
    </ejs-schedule> 
</div> 
 

app.component.ts page: 
import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; 
import { extend } from '@syncfusion/ej2-base'; 
import { DropDownList } from '@syncfusion/ej2-dropdowns'; 
import { DateTimePicker } from '@syncfusion/ej2-calendars'; 
import { 
  PopupOpenEventArgs, EventRenderedArgs, ScheduleComponent, MonthService, DayService, WeekService, WorkWeekService, EventSettingsModel, GroupModel 
} from '@syncfusion/ej2-ng-schedule'; 
import { resAirlinesData } from './datasource'; 
 
/** 
* Schedule editor template sample 
*/ 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styles: [`     
    .custom-event-editor .e-textlabel { 
Loader.
Up arrow icon