React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Dual Listbox in React ListBox component

02 Feb 2023 / 2 minutes to read

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.

Source
Preview
index.jsx
index.html
styles.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let 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" }
    ];
    let 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" }
    ];
    let fields = { text: "Name" };
    let toolbar = { items: ["moveUp", "moveDown", "moveTo", "moveFrom", "moveAllTo", "moveAllFrom"] };
    return (<div className="wrapper">
    <div className="listbox1">
    <ListBoxComponent dataSource={groupA} fields={fields} scope="#listbox" toolbarSettings={toolbar}/></div>
    <div className="listbox2">
    <ListBoxComponent id="listbox" dataSource={groupB} fields={fields}/>
    </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/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>
Copied to clipboard
#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;
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
  let 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" }
  ];

  let 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" }
  ];
  let fields:object = { text:"Name"}
  let toolbar:object = { items:["moveUp", "moveDown", "moveTo", "moveFrom", "moveAllTo", "moveAllFrom"]}

  return (
    <div className="wrapper">
    <div className="listbox1">
    <ListBoxComponent dataSource={groupA} fields={fields} scope="#listbox" toolbarSettings={toolbar}/></div>
    <div className="listbox2">
    <ListBoxComponent id="listbox" dataSource={groupB} fields={fields} />
    </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
Previous
Next