How to get all data from Dual ListBox

[Cleber]

Hi!
I have a form with several fields and at the end 2 pairs of listbox, each pair linked together through scope. I would like to know how to receive the data of values and texts through the post method of the form. I've tried it in several ways but I can't find the content of the value field.
My regards.

[Mohan Kumar Ramasamy]

Hi Cleber, 

 

We have checked your reported query. We can achieve your requirement using getDataList method. And pass the updated data list value to server side. Please refer below code snippets. 

 

 

Index.cshtml 

 

<form> 

        <div class="col-lg-12 control-section"> 

            <div id="drag-drop-wrapper"> 

                <div class="listbox-control"> 

                    <h4>Group A</h4> 

                    <ejs-listbox id="listbox1" dataSource="@ViewBag.groupA" scope="combined-list" allowDragAndDrop="true" height="330px"> 

                        <e-listbox-fields text="Name"></e-listbox-fields> 

                    </ejs-listbox> 

                </div> 

                <span class="e-swap-icon"></span> 

 

                <div class="listbox-control"> 

                    <h4>Group B</h4> 

                    <ejs-listbox id="listbox2" dataSource="@ViewBag.groupB" scope="combined-list" allowDragAndDrop="true" height="330px"> 

                        <e-listbox-fields text="Name"></e-listbox-fields> 

                    </ejs-listbox> 

                </div> 

            </div> 

            <button class="e-btn" onclick="GetData()"> Get Data</button> 

        </div> 

    </form> 

<script> 

   

    var listbox1; var listbox2; 

    

    function GetData() { 

        listbox1 = ej.base.getComponent(document.querySelector('#listbox1'), 'listbox'); 

        listbox2 = ej.base.getComponent(document.querySelector('#listbox2'), 'listbox'); 

 

        var datalist = listbox1.getDataList(); 

        //var dataB = listbox2.getDataList(); 

 

        $.ajax({ 

            type: "POST", 

            data: { datalist: datalist }, 

            url: "/Home/GetData", 

            success: function (data) { 

                console.log("success") 

            } 

        }); 

    } 

</script> 

 

HomeController.cs 

 

public IActionResult Index() 

        { 

            string[] items = new string[] { "moveUp", "moveDown", "moveTo", "moveFrom", "moveAllTo", "moveAllFrom" }; 

            ViewBag.items = items; 

 

            List<object> groupA = new List<object>(); 

            groupA.Add(new { Name = "Australia", Code = "AU" }); 

            groupA.Add(new { Name = "Bermuda", Code = "BM" }); 

            groupA.Add(new { Name = "Canada", Code = "CA" }); 

            groupA.Add(new { Name = "Cameroon", Code = "CM" }); 

            groupA.Add(new { Name = "Denmark", Code = "DK" }); 

            groupA.Add(new { Name = "France", Code = "FR" }); 

            groupA.Add(new { Name = "Finland", Code = "FI" }); 

            groupA.Add(new { Name = "Germany", Code = "DE" }); 

            groupA.Add(new { Name = "Hong Kong", Code = "HK" }); 

            ViewBag.groupA = groupA.ToArray(); 

 

            List<object> groupB = new List<object>(); 

            groupB.Add(new { Name = "India", Code = "IN" }); 

            groupB.Add(new { Name = "Italy", Code = "IT" }); 

            groupB.Add(new { Name = "Japan", Code = "JP" }); 

            groupB.Add(new { Name = "Mexico", Code = "MX" }); 

            groupB.Add(new { Name = "Norway", Code = "NO" }); 

            groupB.Add(new { Name = "Poland", Code = "PL" }); 

            groupB.Add(new { Name = "Switzerland", Code = "CH" }); 

            groupB.Add(new { Name = "United Kingdom", Code = "GB" }); 

            groupB.Add(new { Name = "United States", Code = "US" }); 

            ViewBag.groupB = groupB.ToArray(); 

            return View(); 

        } 

 

        [HttpPost] 

        public List<ListData> GetData(List<ListData> datalist) 

        { 

            return datalist; 

        } 

 

        public class ListData 

        { 

            public string Name { get; set; } 

            public string Code { get; set; } 

        } 

} 

  

 

For your reference, we have prepared a sample based on this, please refer below link. 

 

Link:https://www.syncfusion.com/downloads/support/forum/159270/ze/ListBox-GetDataList-ASPCore1721668589  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar R 

[Cleber]

Hi!

Thank you so much but i solve with this line: document.getElementById('listbox').ej2_instances[0].jsonData.

Use this in the 2 listbox and take values.

My regards!

[Mohan Kumar Ramasamy]

Hi Cleber, 

 

Thanks for the update.  

 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Mohan kumar R