Create Empty ListBox

[Emily Herrmann]

Hi!

I have two questions.

(1)

I can't figure out how to initialize an empty ListBox. I do not want it to be bound to a datasource at all, as I will be adding items dynamically (both through client side js and server side C#). 

My code in the .aspx file is as follows:

<ej:ListBox ID="AthleteListBox" Width="95%" AllowMultiSelection="true" LoadDataOnInit="false" DataValueField="Value" DataTextField="Text" runat="server">

</ej:ListBox>

and I would like it to create a list box with no list items in it. Instead, I get this error: "DataSource/Target list must not be empty at initial load since ListBox is generated from dataSource/target items." If I add in an Items section with at least one ListBoxItems, the box works fine, but I need it to have zero items. I was hoping setting the LoadDataOnInit property to false would solve the problem, but it doesn't seem to have done anything. 

(2)

I can't figure out how to add a list item with both text and value using javascript. I can add items fine from the codebehind, but when I try to add from the client side, I can only successfully add an option with text. I have tried adding an item as follows:

 

     var item= new Object();

     item.Text= "Item Text"

     item.Value= "Item Value"

     listBox.ejListBox("addItem", item); 

But I only end up with an empty list item. 

I can successfully add a list item with text by doing the following:  

     listBox.ejListBox("addItem", "Item Text");

, but I also need the list item to have a value property.

Thanks for your help!

Emily

[Selvamani Sankarappan]

Hi Emily,   

   

Thanks for contacting Syncfusion Support.   

   

Issue 1: I get this error: " DataSource/Target list must not be empty at initial load since ListBox is generated from dataSource/target items."   

   

As per current behavior, you need to add the ListBoxItems as empty, to render the empty ListBox. Refer to the following code example:   

   

<ej:ListBox ID="AthleteListBox" Width="95%" AllowMultiSelection="true"LoadDataOnInit="false" DataValueField="Value" DataTextField="Text" runat="server">   

       <Items>   

           <ej:ListBoxItems Text=""></ej:ListBoxItems>   

       </Items>   

   </ej:ListBox>   

   

Issue 2: I can't figure out how to add a list item with both text and value using javascript. I can add items fine from the codebehind, but when I try to add from the client side, I can only successfully add an option with text.   

   

You can add the items with text and value at client side by JSON object. Refer to the following code example:   

   

var data = [{ Text: "Item Text", Value: "Item Value" }];   

           var obj = $("#<%=AthleteListBox.ClientID%>").ejListBox("instance");   

           obj.addItem(data);   

   

But, the value field does not add in DOM element. So, we have logged this  as an issue at our end which will be available in upcoming release also, we could see an incident under your account with the same reported issue. we request you to refer the incident for more details on the issue. 

 

   

Refer to the following sample:   

http://www.syncfusion.com/downloads/support/directtrac/199825/ze/ListBoxsample_(3)-1740839586 

   

Regards,   

   

Selvamani S.