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

pre select an option in an existing dropwdown

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;

3 Replies

VD Vinitha Devi Murugan Syncfusion Team 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 

JL jose lara 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')) { 

VD Vinitha Devi Murugan Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon