Create Dual List from ListView in ASP.NET MVC ListView control

15 Oct 2021 / 3 minutes to read

The dual list contains two ListView. This allows you to move list items from one list to another using the client-side events. This section explains how to integrate the ListView component to achieve dual list.

Use cases

Stock exchanges of two different countries
Job applications (skill sets)

Integration of Dual List

Here, two ListView components have been used to display the list items. An ej2-button is used to transfer data between the ListView, and a textbox is used to achieve the UI of filtering support.

The dual list supports:

Moving whole data from one list to another.
Moving selected data from one list to another.
Filtering the list by using a client-side typed character.

In the ListView component, sorting is enabled using the sortOrder property, and the select event is triggered while selecting an item. Here, the select event is triggered to enable and disable button states.

Manipulating data

Moving whole data from the first list to the second list(>>)

Here, the whole data can be moved from the first ListView to the second by clicking the first button. When clicking the button, the whole list items are sliced, and concat with the second ListView. This button is enabled only when the data source of the first ListView is not empty.

Moving whole data from the second list to the first list(<<)

The functionality of the second button is the same as above, and data is transferred from the second list to the first list. This button is enabled only when the data source of the second ListView is not empty.

Moving selected item from one list to another list (>) and (<)

The Select event is triggered when selecting a list item in the ListView. The selected items can be transferred between two lists. These buttons will be enabled when selecting an item in lists.

Filtering method

The filtering method is used to filter list items when typing a character in the text box. In this method, the dataManager has been used to fetch data from the data source and display in ListView.

Sorting

By using the dual list, list items can be sorted in the ListView component using the sortOrder property. You can enable sorting in one ListView; in the same order, data can be transferred to another ListView.

razor

list.cs

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists
<div class="list_container">
    <div id="list_container_1">
        <input class="e-input" type="text" id="firstInput" placeholder="Filter" title="Type in a name">
        @Html.EJS().ListView("list-1").DataSource((IEnumerable<object>)ViewBag.firstListData).Select("onFirstListSelect").SortOrder(Syncfusion.EJ2.Lists.SortOrder.Ascending).Render()

    </div>
    <div id="btn">
        @Html.EJS().Button("firstBtn").Content(">>").Render()

        @Html.EJS().Button("secondBtn").Content(">").Disabled(true).Render()

        @Html.EJS().Button("thirdBtn").Content("<").Disabled(true).Render()

        @Html.EJS().Button("fourthBtn").Content("<<").Render()
    </div>
    <div id="list_container_2">
        <input class="e-input" type="text" id="secondInput" placeholder="Filter" title="Type in a name">
        @Html.EJS().ListView("list-2").DataSource((IEnumerable<object>)ViewBag.secondListData).Select("onSeconListSelect").SortOrder(Syncfusion.EJ2.Lists.SortOrder.Ascending).Render()
    </div>

</div>

<style>
.list_container {
    height: 398px;
    max-width: 485px;
    margin: auto;
}

#list_container_1,
#list_container_2 {
    width: 200px;
}

#list-1,
#list-2 {
    height: 362px;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

#list_container_1,
#list_container_2 {
    display: inline-block;
}

.e-btn {
    margin-bottom: 15px;
    width: 40px;
    height: 40px;
}

#btn {
    display: inline-block;
    width: 41px;
    margin: 0 15px;
    position: relative;
    top: -53%;
    transform: translateY(50%);
}
</style>
<script type="text/javascript">

    var firstListObj, secondListObj, firstBtnObj, secondBtnObj, thirdBtnObj, fourthBtnObj, firstListData, secondListData;
    window.onload = function () {
        firstListObj = document.getElementById("list-1").ej2_instances[0];
        secondListObj = document.getElementById("list-2").ej2_instances[0];
        secondBtnObj = document.getElementById("secondBtn").ej2_instances[0];
        thirdBtnObj = document.getElementById("thirdBtn").ej2_instances[0];
        firstBtnObj = document.getElementById("firstBtn").ej2_instances[0];
        fourthBtnObj = document.getElementById("fourthBtn").ej2_instances[0];
        firstListData = firstListObj.dataSource.slice();
        secondListData = secondListObj.dataSource.slice();
    }

    //Here we are moving all list items to second list on clicking move all button
    document.getElementById("firstBtn").addEventListener('click', function () {
        secondListObj.dataSource = Array.prototype.concat.call(firstListObj.dataSource, secondListObj.dataSource);
        secondListObj.dataBind();
        updateFirstListData();
        firstListObj.removeMultipleItems(firstListObj.liCollection);
        firstListData = firstListData.concat(firstListObj.dataSource);
        secondListData = secondListObj.dataSource.slice();
        firstBtnObj.disabled = true;
        onFirstKeyUp();
        setButtonState();
    });

    //Here we are moving selected list item to second list on clicking move button
    document.getElementById("secondBtn").addEventListener('click', function () {
        var e = firstListObj.getSelectedItems();
        secondListObj.dataSource = Array.prototype.concat.call(secondListObj.dataSource, e.data);
        secondListObj.dataBind();
        updateFirstListData();
        firstListObj.removeItem(e.item);
        firstListData = firstListData.concat(firstListObj.dataSource);
        secondListData = secondListObj.dataSource.slice();
        onFirstKeyUp();
        secondBtnObj.disabled = true;
        setButtonState();
    });

    //Here we are moving selected list item to first list on clicking move button
    document.getElementById("thirdBtn").addEventListener('click', function () {
        var e = secondListObj.getSelectedItems();
        firstListObj.dataSource = Array.prototype.concat.call(firstListObj.dataSource, e.data);
        firstListObj.dataBind();
        updateSecondListData();
        secondListObj.removeItem(e.item);
        secondListData = secondListData.concat(secondListObj.dataSource);
        firstListData = firstListObj.dataSource.slice();
        onSecondKeyUp();
        thirdBtnObj.disabled = true;
        setButtonState();

    });

    //Here we are moving all list items to first list on clicking move all button
    document.getElementById("fourthBtn").addEventListener('click', function () {
        firstListObj.dataSource = Array.prototype.concat.call(firstListObj.dataSource, secondListObj.dataSource);
        firstListObj.dataBind();
        updateSecondListData();
        secondListObj.removeMultipleItems(secondListObj.liCollection);
        secondListData = secondListData.concat(secondListObj.dataSource);
        firstListData = firstListObj.dataSource.slice();
        onSecondKeyUp();
        setButtonState();

    });

    //Here we are updating ListView dataSource for First List
    function updateFirstListData() {
        Array.prototype.forEach.call(firstListObj.liCollection, function (list) {
            firstListData.forEach(function (data, index) {
                if (list.innerText.trim() === data.text) {
                    delete firstListData[index];
                }
            });
        });
        document.getElementById("firstInput").value = '';
        var ds = [];
        firstListData.forEach(function (data) {
            ds.push(data);
        })
        firstListData = ds;

    }

    //Here we are updating ListView dataSource for second List
    function updateSecondListData() {
        Array.prototype.forEach.call(secondListObj.liCollection, function (list) {
            secondListData.forEach(function (data, index) {
                if (list.innerText.trim() === data.text) {
                    delete secondListData[index];
                }
            });

        });
        document.getElementById("secondInput").value = '';
        var ds = [];
        secondListData.forEach(function (data) {
            ds.push(data);
        })
        secondListData = ds;

    }
    function onFirstListSelect() {
        secondBtnObj.disabled = false;
    }
    function onSeconListSelect() {
        thirdBtnObj.disabled = false;
    }

    //Here we are handling filtering of list items using dataManager for first List
    function onFirstKeyUp(e) {
        var value = document.getElementById("firstInput").value;
        var data = new ej.data.DataManager(firstListData).executeLocal(new ej.data.Query().where('text', 'startswith', value, true));
        if (!value) {
            firstListObj.dataSource = firstListData.slice();
        } else {
            firstListObj.dataSource = data;
        }
        firstListObj.dataBind();

    }

    //Here we are handling filtering of list items using dataManager for second List
    function onSecondKeyUp(e) {
        var value = document.getElementById("secondInput").value;
        var data = new ej.data.DataManager(secondListData).executeLocal(new ej.data.Query().where('text', 'startswith', value, true));
        if (!value) {
            secondListObj.dataSource = secondListData.slice();
        } else {
            secondListObj.dataSource = data;
        }
        secondListObj.dataBind();
    }

    //Here we are changing the button state
    function setButtonState() {
        if (firstListObj.dataSource.length) {
            firstBtnObj.disabled = false;
        } else {
            firstBtnObj.disabled = true;
            secondBtnObj.disabled = true;
        }

        if (secondListObj.dataSource.length) {
            fourthBtnObj.disabled = false;
        } else {
            fourthBtnObj.disabled = true;
            thirdBtnObj.disabled = true;
        }

    }

</script>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ListViewController : Controller
    {
        public IActionResult list()
        {   
            List<object> listdata = new List<object>();
            listdata.Add(new
            {
                text = "Hennessey Venom",
                id = "list-01"

            }); listdata.Add(new
            {
                text = "Bugatti Chiron",
                id = "list-02"

            }); listdata.Add(new
            {
                text = "Bugatti Veyron Super Sport",
                id = "list-03"

            }); listdata.Add(new
            {
                text = "SSC Ultimate Aero",
                id = "list-04"

            }); listdata.Add(new
            {
                text = "Koenigsegg CCR",
                id = "list-05"

            }); listdata.Add(new
            {
                text = "McLaren F1",
                id = "list-06"
            });
            List<object> listdata1 = new List<object>();

            listdata1.Add(new
            {
                text = "Aston Martin One- 77",
                id = "list-07"
            });
            listdata1.Add(new
            {
                text = "Jaguar XJ220",
                id = "list-08"
            });
            listdata1.Add(new
            {
                text = "McLaren P1",
                id = "list-09"
            });
            listdata1.Add(new
            {
                text = "Ferrari LaFerrari",
                id = "list-10"
            });
            ViewBag.firstListData = listdata;
            ViewBag.secondListData = listdata1;
            return View();
        }       
    }
}

Contents

Use cases
Integration of Dual List
Manipulating data
Moving whole data from the first list to the second list
Moving whole data from the second list to the first list
Moving selected item from one list to another list and
Filtering method
Sorting

Contents

Use cases
Integration of Dual List
Manipulating data
Moving whole data from the first list to the second list
Moving whole data from the second list to the first list
Moving selected item from one list to another list and
Filtering method
Sorting

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!