Add Items to ListBox

[Carsten Buchmann]

Hi,

I try to add some items to a listbox with value and text:

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

                    .ListBoxFields(f => f.Text("Name").Value("Value")

                    .ClientSideEvents(e => e.CheckChange("LocationsChanged"))

                    .Width("100%")

                    )

locations.forEach(function(location){

                listbox.ejListBox("addItem", {Value: location.Id, Name: location.Name + " " + location.PostCode + " " + location.City });

And I get this:

How can add a object to the listbox?

Kind regards,

Carsten

[Arun Palaniyandi]

Hi Carsten, 

Sorry for the inconvenience caused. 

We were able to reproduce the reported issue with addItem, which has been already fixed in the Volume 3, 2017(15.3.0.26) version and above. Hence we suggest you to upgrade to our latest version to get this issue resolved. 

https://www.syncfusion.com/forums/132413/essential-studio-2017-volume-3-service-pack-release-v15-3-0-29-available-for-download. 

Demo Link: http://jsplayground.syncfusion.com/a235ni1e 

Regards, 

Arun P 

[Carsten Buchmann]

Hi Arun,

thanks. The update made my day.

Regards,

Carsten

[Arun Palaniyandi]

  

Hi Carsten,  

  

We are glad that our solution has resolved your issue.  

  

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

  

Regards,  

Arun P.  

[Carsten Buchmann]

Hi Arun,

unfortunately it doesn't work. Indeed I can add items, but they not stored as expected. I can't get the value back out of the selected items:

http://jsplayground.syncfusion.com/iy5bkvzw

In the property text and value are the same values.

Kind regards,

Carsten

[Arun Palaniyandi]

Hi Carsten,  

     

Thanks for your update.   

  

We have checked the reported scenario and we can reproduce your issue. As you have said, items can be added but cannot be stored and this is because you have not given the datasource property to the ListBox. Adding items to Listbox when the datasource is not given, will add the items by taking the given object’s text value through appending the text in the ListBox <ul>. Also, you cannot take the value field because the given text value is considered as the value field in this case. So, we suggest to bind an empty datasource to the ListBox and then you can add items to it. Please find the below code snippets.   

 

   

$("#selectgroup").ejListBox({   

           dataSource:[],    // Bind an empty datasource   

            fields: {   

            text: "Name" ,value:"Value" }   

        }   

                                   );   

        locations.forEach(function(location){   

          $("#selectgroup").ejListBox("addItem", {   

            Name: location.Name, Value: location.Id  });   

        });     

   

   

Demo Link: http://jsplayground.syncfusion.com/hjc4mvwm   

   

Please try the given workaround, and if you still face any issue let us know, so that we would help you out better.   

   

Regards,   

Arun P.