Strange behaviour Dropdown list added to the Editor Window

[Tim Hartog]

Hi,

I am working with Angular version 8.2.14, ej2-angular-schedule version 17.4.43 and ej2-anguar-dropdowns 17.4.44.

In the Editor window I added a Dropdown list based on the Example shown on the Syncfusion Website.

I use the schedule in TimelineView with Resources.

When I enter an appointment for someone and select the status this value is nicely stored. When I look at other appointments the status is also nicely shown.

The strange behaviour is this:

When I open the schedule window for the first time and open an appointment the editor shows no value in the dropdownlist with the status.

When I click om the dropdown the value is shown. After that  for all other appointments the right status is shown immediately.

Until I close the scheduler window and open it again, the first appointment I open, shows an empty value in the status dropdown list.

The code in the methode that opens the Editor is the following:

onPopupOpen(args: PopupOpenEventArgs): void {
  if (args.type === 'Editor') {
    // Create required custom elements in initial time
    if (!args.element.querySelector('.custom-field-row')) {
      let row: HTMLElement = createElement('div', { className: 'custom-field-row' });
      let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form');
      formElement.firstChild.insertBefore(row, args.element.querySelector('.e-description-row'));
      let container: HTMLElement = createElement('div', { className: 'custom-field-container' });
      let inputEle: HTMLInputElement = createElement('input', {
        className: 'e-field', attrs: { name: 'StatusCode' }
      }) as HTMLInputElement;
      container.appendChild(inputEle);
      row.appendChild(container);
      let dropDownList: DropDownList = new DropDownList({
        dataSource: this.dropDownStatusList,
        fields: { text: 'StatusName', value: 'StatusCode' },
        value: (args.data as { [key: string]: Object }).EventType as string,
        floatLabelType: 'Always', placeholder: 'Status'
      });
      dropDownList.appendTo(inputEle);
      inputEle.setAttribute('name', 'StatusCode');
    }
  }
}

I also tried to define the list with static values in the definition of the new Dropdown list. But that made no difference.

Definition of eventObject is as follows:

public eventObject: EventSettingsModel = {
  dataSource: this.planningEventsList,
  enableTooltip: true,
  tooltipTemplate: this.tooltemp,
  allowAdding: true,
  allowEditing: true,
  allowDeleting: true,
  fields: {
    subject: { title: 'Onderwerp', name: 'Subject', validation: { required: true } },
    startTime: { title: 'Van', name: 'StartTime', validation: { required: true } },
    endTime: { title: 't/m', name: 'EndTime', validation: { required: true } },
    description: { title: 'Toelichting', name: 'Description', validation: { required: true } },
    isAllDay: { title: 'Hele dag', name: 'IsAllDay'},
    location: { title: 'Locatie', name: 'Location', validation: { required: true }},
  }
};

I hope someone can tell me what I am missing. Searched the forum and looked at examples but could not find big differences that points to a solution.

Kind regards,

Bob Fiering

[Vengatesh Maniraj]

Hi Bob Fiering, 

Greetings from Syncfusion Support. 

We have analyzed your reported problem at our end. In your shared code, the status field is added additionally in the default editor window and its value will be based on the appointment’s StatusCode like highlighted below code. So, whenever we open the editor window through appointment, the status code field has rendered with it’s given value. If you open the editor window through cells(doubleClick the cells), the status field will be rendered with no values.  

{ 

    Id: 1, 

    Subject: 'Server Maintenance', 

    StartTime: new Date(2018, 1, 11, 10, 0), 

    EndTime: new Date(2018, 1, 11, 11, 30), 

    StatusCode: 'maintenance', 

    City: 'Seattle', 

    CategoryColor: '#1aaa55', 

    TaskId: 1 

} 

If you want to set default value for StatusCode field while opening the editor window through cell double click, kindly use below code snippet. 

if (args.target.classList.contains('e-work-cells')) { 

   (document.querySelector('.custom-field-container .e-dropdownlist') as any).ej2_instances[0].value = 'normal-event'; 

} 

Sample : https://stackblitz.com/edit/angular-spstah-lapovf?file=app.component.ts 

Kindly try the above sample and let us know if you need any further assistance with this. 

Regards, 

Vengatesh. 

[Tim Hartog]

Hello Vengatesh,

Thank you for your answer and solution.

It works perfect now.

Have a nice weekend.

Kind regards,

Bob

[Vengatesh Maniraj]

Hi Bob, 

Thanks for the update.  

We are happy that our solution has fulfilled your requirements. 

Have a great day! 

Regards, 

Vengatesh.