You can check about whether value change happened by manual or programmatic by
using change event argument that argument name is isInteracted.
The following example demonstrate, how to check whether value change happened by manual or programmatic.
var sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }
];
//initiate the DropDownList
var dropDownListObject = new ej.dropdowns.DropDownList({
// bind the sports Data to datasource property
dataSource: sportsData,
// maps the appropriate column to fields property
fields: { text: 'Game', value: 'Id' },
//set the placeholder to DropDownList input
placeholder: "Select a game",
// bind change event handler
change: onChange
});
//render the component
dropDownListObject.appendTo('#ddlelement');
// Set value dynamically
document.getElementById('btn').onclick = () => {
dropDownListObject.value = 'game3';
};
function onChange(args) {
var element = document.createElement('p');
if (args.isInteracted) {
element.innerText = 'Changes happened by Interaction';
}
else {
element.innerText = 'Changes happened by programmatic';
}
document.getElementById('event').append(element);
}<!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.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/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>
<button id="btn" class="e-control e-btn"> Set value dynamically </button>
<p id="event"> </p>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>