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.
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
constructor() {
super(...arguments);
// define the array of data
this.sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
}
onclick() {
this.dropDownListObject.value = 'Football';
}
onChange(args) {
const 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);
}
render() {
return (
// specifies the tag for render the DropDownList component
<div>
<DropDownListComponent id="ddlelement" ref={(scope) => { this.dropDownListObject = scope; }} dataSource={this.sportsData} placeholder="Select a game" change={this.onChange}/>
<button id='btn' className="e-control e-btn" onClick={this.onclick = this.onclick.bind(this)}>
Set value dynamically</button>
<div id='event'/>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React DropDownList</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
<p id='event'> </p>
</body>
</html>
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the array of data
private sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
private dropDownListObject:any;
public onclick(){
this.dropDownListObject.value = 'Football';
}
public onChange(args: any){
const element: HTMLElement = document.createElement('p');
if (args.isInteracted) {
element.innerText = 'Changes happened by Interaction';
} else {
element.innerText = 'Changes happened by programmatic';
}
(document.getElementById('event') as any).append(element);
}
public render() {
return (
// specifies the tag for render the DropDownList component
<div>
<DropDownListComponent id="ddlelement" ref={(scope) => { this.dropDownListObject = scope; }} dataSource={this.sportsData} placeholder="Select a game" change={this.onChange} />
<button id='btn' className="e-control e-btn" onClick={this.onclick = this.onclick.bind(this)}>
Set value dynamically</button>
<div id='event'/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));