pre select an option in an existing dropwdown

[jose lara]

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]

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. 

 

https://stackblitz.com/edit/angular-jedvma-jtvpss?file=app.component.ts  

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' 

                }); 

                drowDownList.appendTo(inputEle); 

 

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. 

 

Kindly try with the above sample and let us know if you need any further assistance on this.  

 

Regards, 

M. Vinitha devi 

[jose lara]

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]

Hi Jose, 

Sorry for the inconvenience. 

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

https://stackblitz.com/edit/angular-jedvma-gzhlnr?file=app.component.ts  

 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. 

Regards, 

M.Vinitha devi