We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

adding change listener to dropwdown in custom editor window

 <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});



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?

3 Replies

VD Vinitha Devi Murugan Syncfusion Team November 11, 2019 05:11 AM

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. 

     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', 
                function onChange(args){ 
                  // You can add your code here. 
                  alert("Change Event Called"); 
M.Vinitha devi 

JL jose lara November 11, 2019 06:31 PM

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

VD Vinitha Devi Murugan Syncfusion Team November 12, 2019 05:08 AM

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. 
M.Vinitha devi  

Live Chat Icon For mobile
Up arrow icon