React
Demos
Support
Forum
Download
Search results

Add item in between in DropDownList in React DropDownList component

You can add item in between based on item index. If you add new item without item index, item will be added as last item in list.

The following example demonstrate how to add item in between in 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 JSON of data
    private sportsData: { [key: string]: Object }[] = [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' }
    ];
    private dropDownListObject: any;
    // maps the appropriate column to fields property
    private fields: object = { text: 'Game', value: 'Id' };
    public onclickfirst(){
    this.dropDownListObject.addItem({Id: 'game0', Game: 'Hockey'}, 0);
    }
    public onclick(){
    this.dropDownListObject.addItem({Id: 'game4', Game: 'Golf'}, 2);
    }
    public onclicklast(){
    this.dropDownListObject.addItem({Id: 'game5', Game: 'Cricket'});
    }
    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" />
                <div id="btn1Div">
                <button id='btn' className="e-control e-btn" onClick={this.onclickfirst = this.onclickfirst.bind(this)}>
                add item (Hockey) in first</button>
            </div>
            <div id="btn2Div">
                <button id='btn2' className="e-control e-btn" onClick={ this.onclick = this.onclick.bind(this)}> add item (Golf) in between</button>
            </div>
            <div id="btn3Div">
                <button id='btn3' className="e-control e-btn" onClick={this.onclicklast = this.onclicklast.bind(this)}>
                  add item (Cricket) in last</button>
            </div>
            </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%;
        }
		 #btn1Div{
        padding: 50px 0;
          
        }
        #btn2Div{
       padding-left: 50px 0;
          
        }
        #btn3Div{
        padding: 50px 0;
          
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Previous
Next