title: customizing event buttons editor window in syncfusion scheduler with angular 8
body: <p>I'm working on angular 8 application which integrates syncfusion scheduler. I would like to customize the editor window that shows after double click in cell scheduler, but I'm getting errors. I tried the documentation examples but none of them worked for me please help</p>
  
  <p>I tried the examples provided in the documentation</p>
  
  <pre><code>&lt;div class="control-section"&gt;
      &lt;div class="drag-sample-wrapper"&gt;
          &lt;div class="schedule-container"&gt;
              &lt;!--The calendar--&gt;
              &lt;ejs-schedule #scheduleObj cssClass='schedule-block-events' width='100%' height='500px' [group]="group"
                  [currentView]="currentView" [selectedDate]="selectedDate" [eventSettings]="eventSettings"&gt;
                  &lt;e-resources&gt;
                      &lt;e-resource ffield='EmployeeId' title='Employees' name='Employee' [dataSource]='employeeDataSource'
                          [allowMultiple]='allowMultiple' textField='Text' idField='Id' colorField='Color'
                          name="Employee"&gt;
                      &lt;/e-resource&gt;
                  &lt;/e-resources&gt;
                  &lt;!--Ressources Template--&gt;
                  &lt;ng-template #resourceHeaderTemplate let-data&gt;
                      &lt;div class="template-wrap"&gt;
  
                          &lt;div class="name"&gt;{{getEmployeeName(data)}}&lt;/div&gt;
                          &lt;div class="designation"&gt;{{getEmployeeDesignation(data)}}&lt;/div&gt;
                          &lt;div class="leaveBalance"&gt;{{getEmployeeLeaveBalance(data)}}&lt;/div&gt;
                          &lt;div class="remainingleaveBalance"&gt;{{getEmployeeRemainingLeaveBalance(data)}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/ng-template&gt;
  
                  &lt;!--The popup to fill leave request--&gt;
                  &lt;ng-template #editorTemplate let-data&gt;
                      &lt;table class=custom-event-editor width="100%" cellpadding="5"&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td class="e-textlabel"&gt;De:&lt;/td&gt;
                                  &lt;td colspan="4"&gt;
                                      &lt;ejs-datetimepicker placeholder='Select  start a date and time' [value]='date'&gt;
                                      &lt;/ejs-datetimepicker&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td class="e-textlabel"&gt;A:&lt;/td&gt;
                                  &lt;td colspan="4"&gt;
                                      &lt;ejs-datetimepicker placeholder='Select end a date and time' [value]='date'&gt;
                                      &lt;/ejs-datetimepicker&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td class="e-textlabel"&gt;Type de congé:&lt;/td&gt;
                                  &lt;td colspan="4"&gt;
                                      &lt;ejs-dropdownlist id='ddlelement' [dataSource]='TypesData'&gt;&lt;/ejs-dropdownlist&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td class="e-textlabel"&gt;Commentaire&lt;/td&gt;
                                  &lt;td colspan="4"&gt;
                                      &lt;textarea id="Description" class="e-field e-input" name="Description" rows="3"
                                          cols="50"
                                          style="width: 100%; height: 60px !important; resize: vertical"&gt;&lt;/textarea&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/ng-template&gt;
  
                  &lt;!--Quick  info content template--&gt;
                  &lt;ng-template #quickInfoTemplatesContent let-data&gt;
                      &lt;div class="e-popup-content"&gt;
                          &lt;table class="e-popup-table"&gt;
                              &lt;tbody&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;
                                          &lt;form class="e-schedule-form e-lib e-formvalidator" onsubmit="return false;"
                                              novalidate=""&gt;
                                              &lt;span class="e-input-group e-control-wrapper"&gt;
                                                  &lt;input class="e-subject e-field e-input" type="text" name="Subject"
                                                      placeholder="Ajouter un titre" aria-placeholder="Ajouter un titre"&gt;
                                              &lt;/span&gt;
                                          &lt;/form&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;
                                          &lt;div class="e-date-time"&gt;
                                              &lt;div class="e-date-time-icon e-icons"&gt;&lt;/div&gt;
                                              &lt;div class="e-date-time-details e-text-ellipsis"&gt;{{date}}&lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
  
                  &lt;/ng-template&gt;
  
                  &lt;!--Quick  info Header template--&gt;
                  &lt;ng-template #quickInfoTemplatesFooter let-data&gt;
                      &lt;div class="e-popup-footer"&gt;
                          &lt;button class="e-event-details e-text-ellipsis e-control e-btn e-lib e-flat"
                              title="More Details"&gt;Plus Details&lt;/button&gt;
                          &lt;button class="e-event-create e-text-ellipsis e-control e-btn e-lib e-flat e-primary"
                              title="Save"&gt;Enregistrer&lt;/button&gt;
  
                      &lt;/div&gt;
                  &lt;/ng-template&gt;
                  &lt;!-- Views--&gt;
                  &lt;e-views&gt;
                      &lt;e-view option="TimelineMonth" [allowVirtualScrolling]="virtualscroll"&gt;
                          &lt;ng-template #eventTemplate let-data&gt;
                              &lt;div class='template-wrap' [style.background]="data.PrimaryColor"&gt;
  
                              &lt;/div&gt;
                          &lt;/ng-template&gt;
                      &lt;/e-view&gt;
                  &lt;/e-views&gt;
              &lt;/ejs-schedule&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'GroupID' of undefined</p>
  </blockquote>