React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Remove an item from DropDownList in React DropDownList component

The following example demonstrate about how to remove an item from DropDownList.

Source
Preview
index.tsx
index.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: { [key: string]: Object }[] = [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' }
    ];

    // maps the appropriate column to fields property
    private fields: object = { text: 'Game', value: 'Id' };
    private dropDownListObject:any;
    public onclick(){
         if (this.dropDownListObject.list) {
            // Remove the selected value if 0th index selected
          if (this.dropDownListObject.index === 0) {
             this.dropDownListObject.value = null;
             this.dropDownListObject.dataBind();
          }
            // remove first item in list
          (this.dropDownListObject.list.querySelectorAll('li')[0]).remove();
          if (!this.dropDownListObject.list.querySelectorAll('li')[0]) {
                this.dropDownListObject.dataSource = [];
                // enable the nodata template when no data source is empty.
                this.dropDownListObject.list.classList.add('e-nodata');
           }
           } else {
            // remove first item in list
            this.dropDownListObject.dataSource.splice(0, 1);
           }

    }
    public render() {
        return (
             // specifies the tag for render the DropDownList component
             <div>
            <DropDownListComponent id="ddlelement" ref={(scope) => { this.dropDownListObject = scope; }} dataSource={this.sportsData} fields={this.fields} placeholder="Select a game" />
            <button id='btn' className="e-control e-btn" onClick={this.onclick = this.onclick.bind(this)}>
            Remove 0th item </button>
      </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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</body>

</html>
Previous
Next