The dual list box allows the user to move items between two list boxes by clicking the toolbar buttons. Dual list box can be created by listing items in the
toolbarSettings along with the scope property.
The following operations can be performed in dual list box,
| Options | Description |
|---|---|
| moveUp | Move the selected item in the upward direction within the list box. |
| moveDown | Move the selected item in the downward direction within the list box. |
| moveTo | Move the selected item to the another list box. |
| moveFrom | Move the selected item from one list box to the another list box. |
| moveAllTo | Move all the items to the another list box. |
| moveAllFrom | Move all the items from one list box to the another list box. |
The following example illustrates how to move items from Group A to Group B list box.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.groupA = [
{ "Name": "Australia", "Code": "AU" },
{ "Name": "Bermuda", "Code": "BM" },
{ "Name": "Canada", "Code": "CA" },
{ "Name": "Cameroon", "Code": "CM" },
{ "Name": "Denmark", "Code": "DK" },
{ "Name": "France", "Code": "FR" },
{ "Name": "Finland", "Code": "FI" },
{ "Name": "Germany", "Code": "DE" },
{ "Name": "Hong Kong", "Code": "HK" }
];
this.groupB = [
{ "Name": "India", "Code": "IN" },
{ "Name": "Italy", "Code": "IT" },
{ "Name": "Japan", "Code": "JP" },
{ "Name": "Mexico", "Code": "MX" },
{ "Name": "Norway", "Code": "NO" },
{ "Name": "Poland", "Code": "PL" },
{ "Name": "Switzerland", "Code": "CH" },
{ "Name": "United Kingdom", "Code": "GB" },
{ "Name": "United States", "Code": "US" }
];
this.fields = { text: "Name" };
this.toolbar = { items: ["moveUp", "moveDown", "moveTo", "moveFrom", "moveAllTo", "moveAllFrom"] };
}
render() {
return (<div className="wrapper">
<div className="listbox1">
<ListBoxComponent dataSource={this.groupA} fields={this.fields} scope="#listbox" toolbarSettings={this.toolbar}/></div>
<div className="listbox2">
<ListBoxComponent id="listbox" dataSource={this.groupB} fields={this.fields}/>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListBox</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" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="./styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.listbox1,
.listbox2 {
width: 25%;
}
.listbox1 {
float: left;
padding: 0 0 0 145px;
}
.listbox2 {
float: right;
padding: 0 292px 0 0;
}import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component<{}, {}> {
public groupA: { [key: string]: Object }[] = [
{ "Name": "Australia", "Code": "AU" },
{ "Name": "Bermuda", "Code": "BM" },
{ "Name": "Canada", "Code": "CA" },
{ "Name": "Cameroon", "Code": "CM" },
{ "Name": "Denmark", "Code": "DK" },
{ "Name": "France", "Code": "FR" },
{ "Name": "Finland", "Code": "FI" },
{ "Name": "Germany", "Code": "DE" },
{ "Name": "Hong Kong", "Code": "HK" }
];
public groupB: { [key: string]: Object }[] = [
{ "Name": "India", "Code": "IN" },
{ "Name": "Italy", "Code": "IT" },
{ "Name": "Japan", "Code": "JP" },
{ "Name": "Mexico", "Code": "MX" },
{ "Name": "Norway", "Code": "NO" },
{ "Name": "Poland", "Code": "PL" },
{ "Name": "Switzerland", "Code": "CH" },
{ "Name": "United Kingdom", "Code": "GB" },
{ "Name": "United States", "Code": "US" }
];
private fields:object = { text:"Name"}
private toolbar:object = { items:["moveUp", "moveDown", "moveTo", "moveFrom", "moveAllTo", "moveAllFrom"]}
render() {
return (
<div className="wrapper">
<div className="listbox1">
<ListBoxComponent dataSource={this.groupA} fields={this.fields} scope="#listbox" toolbarSettings={this.toolbar}/></div>
<div className="listbox2">
<ListBoxComponent id="listbox" dataSource={this.groupB} fields={this.fields} />
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));