Having trouble getting help?
Contact Support
Contact Support
Clear item in React Drop down list component
2 Feb 20233 minutes to read
You can clear the selected item in the below two different ways.
By clicking on the clear icon
which is shown in DropDownList element, you can clear the selected item in DropDownList through interaction. By usingshowClearButton
property, you can enable the clear icon in DropDownList element.
Through programmatic you can set null
value to anyone of the index, text or value property to clear the selected item in DropDownList.
The following example demonstrate about how to clear the selected item in DropDownList.
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 {
dropDownListObject;
sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
onclick() {
this.dropDownListObject.value = null;
}
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"/>
<button id='btn' className="e-control e-btn" onClick={this.onclick = this.onclick.bind(this)}> Set null to value property</button>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
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<{}, {}> {
private dropDownListObject: any;
private sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
public onclick() {
this.dropDownListObject.value = null;
}
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" />
<button id='btn' className="e-control e-btn" onClick={this.onclick = this.onclick.bind(this)}> Set null to value property</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));