Dual list box in EJ2 JavaScript List box control

2 May 20236 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.

index.js
index.html
var 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" }
];

var 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" }
];

var listObj = new ej.dropdowns.ListBox({

    // Set the groupa data to the data source.
    dataSource: groupA,

    // Map the appropriate columns to fields property.
    fields: { text: 'Name'},

    // Set the scope of the ListBox.
    scope: '#listbox2',

    // Set the tool settings with set of items.
    toolbarSettings: { items: ['moveUp', 'moveDown', 'moveTo', 'moveFrom', 'moveAllTo', 'moveAllFrom']},

    height: '330px'

});

listObj.appendTo('#listbox1');

listObj = new ej.dropdowns.ListBox({

    // Set the groupa data to the data source.
    dataSource: groupB,

    // Map the appropriate columns to fields property.
    fields: { text: 'Name' },

    height: '330px'

});

listObj.appendTo('#listbox2');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 ListBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:45%;">
        <div class="dual-list-wrapper">
            <div class="dual-list-groupa">
                <h4>Group A</h4>
                <input id="listbox1">
            </div>
            <div class="dual-list-groupb">
                <h4>Group B</h4>
                <input id="listbox2">
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>