Display text which is not in DataSource

[David House]

I would like to override the displayed text at the top of the dropdownlist, in order to 'select' an option which is not in the datasource, I can maintain which option was selected outside of the dropdownlist, but I need to display different text in the display box.
This is with Javascript(ES5)

[Berly Christopher]

Hi David, 

  

Greetings from Syncfusion support. 

  

DropDownList component does not have a custom value support and we could not select the item which is not available in the data source. So, we suggest you to use our combo box component which have custom value support. Please find the demo and documentation from the below link. 

  

UG Link: https://ej2.syncfusion.com/documentation/combo-box/getting-started/#custom-values  

Demo Link: https://ej2.syncfusion.com/javascript/demos/#/material/combo-box/custom-value.html  

  

Else, we can add the item which is not available in the data source with help of addItem method as mentioned below code example. 

  

            // get the typed characters 

            var customValue = document.getElementsByClassName("e-input-filter")[0] 

              .value; 

            // make new object based on typed characters 

            var newItem = { Name: customValue, Code: customValue }; 

        // new object added to data source. 

        ddlObj.dataSource.push(newItem); 

        // close the popup element. 

        ddlObj.hidePopup(); 

        // pass new object to addItem method. 

        ddlObj.addItem(newItem); 

        // select the newly added item. 

        ddlObj.value = customValue; 

    }; 

 

  

Sample Link: https://stackblitz.com/edit/anqn1u?file=index.js  

  

Else, if you want to modify the displayed text in the input of the DropDownList after select the value, we suggest you to use the valueTemplate in the component. Kindly refer the below code example, 

  

Here, we have showcase the corresponding designation of the employee in the DropDownList component with help of valueTemplate.  

  

// initialize DropDownList component 

var dropDownListObj = new ej.dropdowns.DropDownList({ 

  // set the employees data to dataSource property 

  dataSource: window.ddEmployeesList, 

  // map the appropriate columns to fields property 

  fields: { text: "Name" }, 

  valueTemplate: '<div class="name"> ${Designation} </div></div>', 

  // set the placeholder to DropDownList input element 

  placeholder: "Select an employee", 

  // set the height of the popup element 

  popupHeight: "270px" 

}); 

dropDownListObj.appendTo("#employees"); 

 

  

Sample Link: https://stackblitz.com/edit/qgsor4?file=index.html  

UG Link: https://ej2.syncfusion.com/documentation/drop-down-list/templates/#value-template  

  

Regards, 

Berly B.C  

[David House]

So after some testing I decided to go with templates, this lets me attach an ID to the template and edit the text directly after submitting it, however now I'm running into another issue, if I manually call the refresh() method on the dropdown object, it does not rebuild with a template, is there a way to force it to use the template when manually refreshing?

[Berly Christopher]

Hi David, 

  

When we calling the refresh() method, the control will be re-render. So, please share the use case requirement for calling refresh method when using template in the application. Instead of we suggest you to use the dataBind() method this will help us to avoid the mentioned issue in your end. 

API Link: https://ej2.syncfusion.com/javascript/documentation/api/multi-select#databind  

  

Regards, 

Berly B.C 

[David House]

Ok! Thank you so much BC, yes the dataBind did work, I also had to use the refresh in two locations, but proper usage of them appears to have solved the issues, now my options are working properly, thank you so much.

[Berly Christopher]

Hi David, 

  

We are glad to know that your issue is resolved. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C 

[David House]

Something related to dropdown menu lists, how can I recieve an event if I click on an already selected element?

[Berly Christopher]

Hi David,  

  

We have checked your query. We can receive select event if we click on an already selected item. Please find the sample for reference.  

  

Sample: https://stackblitz.com/edit/uhifzm?file=index.js   

  

Could you please check the above details, and get back to us, if you need assistance on this.  

  

Regards,  

Berly B.C  

[David House]

Ahh, see I was using dropdown list, where as that's dropdown button, ended up figuring it out though through some of my own code, that being said I do have another issue I would like help with involving charts, but I feel that should be in a new thread on the subject, thank you very much for your assistance!

[Berly Christopher]

Hi David, 

  

Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C