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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

pre select an option in an existing dropwdown

Thread ID:





149529 Nov 29,2019 12:25 AM UTC Dec 2,2019 11:33 AM UTC Angular - EJ 2 3
Tags: Schedule
jose lara
Asked On November 29, 2019 12:25 AM UTC

Hi, how can I pre-select a value, in an existing dropdown list, inside onPopUpOpen method. I tried the following, but I am unable to convert HTMLInputElement to dropdownlist and select a value. Can you pls provide a simple example, using query selector, to select an existing dropdown and select an option having value = 2 for e.g.

let startElement: HTMLInputElement = args.element.querySelector('#className') as HTMLInputElement;

Vinitha Devi Murugan [Syncfusion]
Replied On November 29, 2019 11:28 AM UTC

Hi Jose, 
Syncfusion Greetings. 
We achieved your requirement by setting default value to dropdown on popupOpen event. Please refer below codes and same can be available in below sample. 

onPopupOpen(args: PopupOpenEventArgs): void { 
        if (args.type === 'Editor') { 
            // Create required custom elements in initial time 
            if (!args.element.querySelector('.custom-field-row')) { 
                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 || "public-event" as string, 
                    floatLabelType: 'Always', placeholder: 'Event Type' 
In the example above, when you click on the cell, we selected eventType as ' Public Event ' and when you click on the event, we selected eventType based on the type of event appointment. 
M. Vinitha devi 

jose lara
Replied On November 30, 2019 03:49 AM UTC

Thx for your sample. If you read my question carefully, I am talking about pre selecting an option in an EXISTING drop down, which has already been created. I already tried your approach a few days back, but that only works the FIRST time you open a popup since the scheduler has been created. This is because, your selection logic resides within an "if" condition, that only gets triggered, the first time a popup is opened. If you run your code sample and try to open the popup the second time, you would notice that no option is selected; it only works the first time you open it, after the scheduler is created. 

if (!args.element.querySelector('.custom-field-row')) { 

Vinitha Devi Murugan [Syncfusion]
Replied On December 2, 2019 11:33 AM UTC

Hi Jose, 

Sorry for the inconvenience. 

We have modified our previously shared sample with below codes and same can be available in following link. 

 else { 
              let dropdownObj = (document.querySelector('.e-dropdownlist') as any).ej2_instances[0]; 
              dropdownObj.value = isNullOrUndefined(dropdownObj.value) ? "public-event" : dropdownObj.value; 

Kindly try the above solution and let us know, if you need further assistance on this. 

M.Vinitha devi 


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