How to set a default value to extra field dropdown list in the popup edit appointment.

Question

I Load all the elements of the dropdown list here:        this.lessons.forEach(lesson=>{          this.matter_teacherAdaptor.push({            value : lesson.id.toString() ,            text: lesson.matterTeacher.matter.matter_name+"|"+lesson.matterTeacher.teacher.user.firstname+" "+lesson.matterTeacher.teacher.user.lastname          });         });I create a new custom field to the appointment edit form: 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 = args.element.querySelector('.e-schedule-form');            formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));            let container: HTMLElement = createElement('div', { className: 'custom-field-container' });            let inputEle: HTMLInputElement = createElement('input', {                className: 'e-field', attrs: { name: 'Matter' }            }) as HTMLInputElement;            container.appendChild(inputEle);            row.appendChild(container);                        let dropDownList: DropDownList = new DropDownList({                dataSource: this.matter_teacherAdaptor,                fields: { text: 'text', value: 'value' },                value: (<{ [key: string]: Object }>(args.data)).EventType as string,                floatLabelType: 'Always', placeholder: 'Select matter and techer please'            });            dropDownList.appendTo(inputEle);            inputEle.setAttribute('text', 'Value');                    }    }} And this is the appointment list:this.ttList.forEach(tt=>{      this.data.push({        Id :tt.id,        Subject:tt.lesson.matterTeacher.matter.matter_name+                "
"+ tt.lesson.matterTeacher.teacher.user.firstname+                " "+tt.lesson.matterTeacher.teacher.user.lastname+                "
"+ tt.lesson.classRoom.classroom_name,        StartTime: tt.startTime,        EndTime: tt.endTime,              });     });the question is how How to set a default value to extra field dropdown list in the popup edit, and when clicking the save button after editing how can i get the the appointment fields including the extra one to save it into data base.Thx.

Hareesh Balasubramanian · Accepted Answer

Hi Zaghdoudi, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query “need to set a default value for the additional dropdown field inside the editor window” using the popupOpen event of the Scheduler, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-additional-dropdown-field-in-schedule?file=app.component.ts 





    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-title-location-row') 
        ); 
        let container: HTMLElement = createElement('div', { 
          className: 'custom-field-container' 
        }); 
        let inputEle: HTMLInputElement = createElement('input', { 
          className: 'e-field custom-dropdown', 
          attrs: { name: 'EventType' } 
        }) as HTMLInputElement; 
        container.appendChild(inputEle); 
        row.appendChild(container); 
        let drowDownList: DropDownList = new DropDownList({ 
          dataSource: [ 
            { text: 'Public Event', value: 'public-event' }, 
            { text: 'Maintenance', value: 'maintenance' }, 
            { text: 'Commercial Event', value: 'commercial-event' }, 
            { text: 'Family Event', value: 'family-event' } 
          ], 
          fields: { text: 'text', value: 'value' }, 
          value: (args.data as { [key: string]: Object }).EventType as string, 
          floatLabelType: 'Always', 
          placeholder: 'Event Type' 
        }); 
        drowDownList.appendTo(inputEle); 
        inputEle.setAttribute('name', 'EventType'); 
      } 
      if (args.target.classList.contains('e-work-cells')) { 
        (args.element.querySelector( 
          '.custom-dropdown' 
        ) as any).ej2_instances[0].index = 0; 
      } 
    } 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh