Dual list box in React List box component

21 Feb 20268 minutes to read

The dual list box enables users to move items between two list boxes using toolbar buttons. Create a dual list box by configuring items in the toolbarSettings property along with the scope property.

The following operations are available 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.

index.jsx

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'));

index.tsx

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'));