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

[zaghdoudi baha]

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+

                "\n"+ tt.lesson.matterTeacher.teacher.user.firstname+

                " "+tt.lesson.matterTeacher.teacher.user.lastname+

                "\n"+ 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]

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