When binding the remote data source, by using the actionComplete event, you can modify the result data before passing it to DropDownList.
The following sample demonstrate how to modify the result data.
var ddlObject = new ej.dropdowns.DropDownList({
//bind the data manager instance to dataSource property
dataSource: new ej.data.DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
adaptor: new ej.data.ODataV4Adaptor(),
crossDomain: true
}),
//bind the Query instance to query property
query: new ej.data.Query().select(['ContactName']),
//map the appropriate columns to fields property
fields: { value: 'ContactName'},
//set the placeholder to DropDownList input
placeholder: "Find a customer",
//sort the resulted items
actionComplete: function (e) {
// initially result contains 6 items
console.log("Before modified the result: " + e.result.length);
// remove first 2 items from result.
e.result.splice(0, 2);
// now displays the result count is 4.
console.log("After modified the result: " + e.result.length);
}
});
//render the component
ddlObject.appendTo('#ddlelement');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 DropDownList</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="margin:0 auto; width:250px;">
<br>
<input type="text" id="ddlelement">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>