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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131449 Jul 10,2017 02:07 PM Jul 14,2017 09:34 AM ASP.NET MVC 5
loading
Tags: ListBox
Nicola
Asked On July 10, 2017 02:07 PM

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 08:29 AM

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 01:38 PM

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 10:02 AM

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 11:31 AM

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 09:34 AM

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.

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.

;