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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

adding change listener to dropwdown in custom editor window

Thread ID:

Created:

Updated:

Platform:

Replies:

148969 Nov 9,2019 08:01 PM UTC Nov 12,2019 10:08 AM UTC Angular - EJ 2 3
loading
Tags: Schedule
jose lara
Asked On November 9, 2019 08:01 PM UTC

 <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 [Syncfusion]
Replied On November 11, 2019 10:11 AM UTC

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


jose lara
Replied On November 11, 2019 11:31 PM UTC

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 [Syncfusion]
Replied On November 12, 2019 10:08 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon