adding change listener to dropwdown in custom editor window

[jose lara]

 <input type = "text"   id="classOptions" class="e-field" name="classOptions"/>

onPopupOpen(args: PopupOpenEventArgs): void {

  if (args.type === 'Editor') {

 let classOptElement: HTMLInputElement = args.element.querySelector('#classOptions');

      let classOptObject : DropDownList = new DropDownList ({ fields: { text: 'option', value: 'id' },

      dataSource: <any>this.classOptions});

      classOptObject.appendTo(classOptElement)

}}

In the above example, I am adding a dropdownlist component to my custom editor window. How can I add a change listener to it? Usually, we could use the onChange event, but I am not sure how I could use it INSIDE the onPopupOpen event. Can you provide a working example?

[Vinitha Devi Murugan]

Hi jose, 

 

Syncfusion Greetings. 

 

We prepared a sample in the scheduler's popupOpen event to add change event to drop down list. Please refer below sample link. 

 

https://stackblitz.com/edit/angular-krnjzt-gkro3w?file=app.component.ts  

     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', 

                    change:onChange 

                }); 

                function onChange(args){ 

                  // You can add your code here. 

                  alert("Change Event Called"); 

                  console.log(args); 

                } 

  

Regards, 

M.Vinitha devi 

 

[jose lara]

Hi, your code works, but the change event also gets triggered at the time of closing the popup. How can I avoid this?

[Vinitha Devi Murugan]

Hi Jose, 

 

Thanks for your update. 

 

By making use of the scheduler's popupClose event, you can prevent the change event from getting triggers at the time of close. Please refer below sample. 

 

https://stackblitz.com/edit/angular-krnjzt-sd1hpy?file=app.component.ts   

 

Regards, 

M.Vinitha devi