How to get all items from ListBox and pass to control ?

[Nicola]

Hi,

I have a view with 2 listBox and I can do drag and drop from both.

<div class="form-group">

            <div class="col-lg-2"></div>

            <div class="col-lg-3">

                <span> Lista centri disponibili</span>

                @(Html.EJ().ListBox("ListaCentriDisponibili")

                    .Datasource(ds => ds.URL(@Url.Action("ListaCentriDisponibili", "Centri", new { userID =Model.userID  })).Adaptor(AdaptorType.UrlAdaptor))

                    .ListBoxFields(f => f.Text("codeDenom").Value("IDcentro")).AllowDragAndDrop(true)

                    .Width("100%"))

            </div>

            <div class="col-lg-3">

                <span> Lista centri utente</span>

                @(Html.EJ().ListBox("ListaCentriUtente")

                .Datasource(ds => ds.URL(@Url.Action("ListaCentriUtente", "Centri", new { userID = Model.userID })).Adaptor(AdaptorType.UrlAdaptor))

                .ListBoxFields(Df => Df.Text("codeDenom").Value("IDcentro")).AllowDragAndDrop(true)

                .Width("100%")

                )

            </div>

        </div>

I want , on submit, take all items from the list and pass to controller.

How can do this?

[Arun Palaniyandi]

Hi Nicola, 

 

Thanks for contacting Syncfusion Support.    

 

We can achieve your scenario by passing the ListBoxes model value to the controller through AJAX call and then save the value in the database. To pass the ListBox model values, we have to stringify the json values and thenit must deserialized it in the server side; After the value is successfully saved in the Database, the AJAX will call the success method.  

 

We have also the shared sample in the below location.    

 

http://www.syncfusion.com/downloads/support/forum/131449/ze/MvcApplicationListBoxDragDrop413420970 

 

Please check the shared sample and information and if the shared details still do not meet your requirement, send us more information to help us provide a solution.            

            

Regards,            

Arun P.  

[Nicola]

Thanks for your reply.

I tried your sample and works fine,
the JSON.stringify(target1.model.dataSource) return a string like this:

 "[{"text":"ASP.NET"},{"text":"C++"},{"text":"dBase"}]"

In my situation return a string like this:

"dataSource":{"url":"/Centri/ListaCentriUtente?userID=bfa07f07-62f7-4f3c-b775-3a27dfc98cab","json":[],"timeTillExpiration":0,"cachingPageSize":0,"jsonp":"callback","dataType":"json","offline":false},"adaptor":{"options":{"from":"table","requestType":"json","sortBy":"sorted","select":"select","skip":"skip","group":"group","take":"take","search":"search","count":"requiresCounts","where":"where","aggregates":"aggregates"},"pvt":{}}}"

I think the difference is that in my listBox I use a datasource with urldataadaptor, in yours use IEnumerable from viewBag.

Do you have a solution?

[Arun Palaniyandi]

Hi Nicola,  

  

Thanks for your update. 

Yes, we have a solution to differentiate between the datasource with urldataadaptor and use IEnumerable from viewBag. In our previous update, we have passed the model datasource value to server because the datasource value is given as IEnumerable from viewbag and returns the JSON output. Since you are using the urldataadaptor you can pass the values to controller by two ways. 

 

1.     getListData public method to take all the listbox values 

2.     To find current li element in the element. 

 

Please see the below screenshot for further reference. 

 

function onsave(e) { 

 

        target1 = $("#ListaCentriDisponibili").data("ejListBox"); 

        target2 = $("#ListaCentriUtente").data("ejListBox"); 

 

        selections = target1.element.find("li"); 

        var items = []; 

        for (i = 0; i < selections.length; i++) { 

            var item = { text: selections[i].innerText, uniqueKey: selections[i].value }; 

            items.push(item);  // Gets only the current item in the Listbox 

        } 

 

        $.ajax({ 

            type: 'POST', 

            dataType: 'json', 

 

            url: '@Url.Action("ListBoxpost", "ListBox")', 

            data: { 

                listdata1: JSON.stringify(items), listdata2: JSON.stringify(target2.model.dataSource), listdata3: JSON.stringify(target1.getListData())    // Gets all items in Listbox 

            }, 

            success: function (response) { 

                alert("Success"); 

            }, 

            error: function (response) { 

                alert("Success"); 

                

 

            } 

        }); 

 

    } 

We have also modified our previous shared sample below for your reference. 

http://www.syncfusion.com/downloads/support/directtrac/131449/ze/MvcApplicationListBoxDragDrop-419254086 

 

Please let us know if you have any queries. 

Regards, 

Arun P. 

[Nicola]

The solution to find current li element in the element is the right choice for me, and i had thought the same solution before your reply, because i need the all items in the listBox after drag drop not the all items returned from datasource.

I thought there was a ListBox method that do this, but the solution with li tag is ok

The getListData() return all items that returns the action @Url.Action("DataSource", "ListBox") and this is not realy useful.

Thanks
Nicola

[Arun Palaniyandi]

Hi Nicola, 

 

We are glad that our solution has resolved your issue. 

 

Please let us know if you have any queries in future. 

 

Regards, 

Arun P.