Select an item beyond the items bound through query in dropdownlist.
Description:
To set a value beyond the bounded data from remote data.
Solution:
Create a query based on value and execute the query using Data Manager. The result will be returned in Data Manager’s done method and the item can be added into DropDownList using addItem public method. Then, you can set those value into DropDownList using option or setModel method.
Refer to the following code snippet:
Javascript:
<div>Select a customer</div>
<input type="text" id="customerList" />
<script type="text/javascript">
$(function () {
// DataManager creation
var dataManager = ej.DataManager({
url: "https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Customers"
});
// Query creation
var query = ej.Query().take(20);
$('#customerList').ejDropDownList({
dataSource: dataManager,
fields: { text: "CustomerID" ,value:"ContactName"},
query: query,
actionComplete:function(args)
{
var proxy = this;
var query = ej.Query().select(this.model.fields.value,this.model.fields.text).where(this.model.fields.value, "equal", "Howard Snyder", false); //query the item with requried value
var execute = dataManager.executeQuery(query) // executing query
.done(function (e) {
if(proxy.popupListItems.indexOf(e.result[0]) < 0)
{
proxy.addItem(e.result);//add new item based on query result
proxy.setModel({value :e.result[0].ContactName});//set value to be selected.
}
})
}
});
});
</script>
JSPlayground sample: https://jsplayground.syncfusion.com/t4jpa4mi
