We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131449 Jul 10,2017 06:07 PM UTC Jul 14,2017 01:34 PM UTC ASP.NET MVC 5
loading
Tags: ListBox
Nicola
Asked On July 10, 2017 06:07 PM UTC

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 [Syncfusion]
Replied On July 12, 2017 12:29 PM UTC

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.    
 
 
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
Replied On July 12, 2017 05:38 PM UTC

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 [Syncfusion]
Replied On July 13, 2017 02:02 PM UTC

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. 
 
Please let us know if you have any queries. 
Regards, 
Arun P. 


Nicola
Replied On July 13, 2017 03:31 PM UTC

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 [Syncfusion]
Replied On July 14, 2017 01:34 PM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;