How to Dynamically add HTML as a list item

[MikeAMember]

Hi,
I see where HTML items can be added to listbox from the sample. Just create ‘source’ array before init, (Which includes the ‘html:’ tag, however i want to dynamically add HTML divs to a listbox. How do I do this ?
How do you specify the ‘html : ‘ part? Here is the HTML code which I want to add to the listbox. (For example I would add 10 of these to a listbox..)

Also can I use the ‘InsertAt’ method? That seems to give an error if there was no ‘source’ specified on init. Please show an example of doing this.

Thanks,
Mike

[supportParticipant]

Hi Mike,

In the current version, the ListBox’s source property is required to be set during the initialization or after that. Otherwise, the insertAt method will not work as it tries to insert an item in the source object.

If your ListBox is empty and you want to add the first item, you can dynamically set the source property:

$("#jqxWidget").jqxListBox({ source: source });

To dynamically add new items, you can use the ‘insertAt’ method:

For example:

var item = { html: "<b>Item</b>"};        
$("#jqxWidget").jqxListBox('insertAt', item, 0);

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[MikeAMember]

Thanks Peter,
I was able to get the HTML into the listbox by using your example. Great!.
One final issue I am having with this, simply trying to get the Listbox always be 100% width of it’s parent div.
I have a table, and in each cell of a table I have a ‘Div’, within each ‘div’ i have a jqxListBox. I want the listbox to always take 100% width of its parent div. I tried the code below but it does not work. Because dynamically adding table cells (TD’s), the width of each cell changes automatically which is what I want.
Here is what I am trying to always make the listbox 100% of its parent div.
Feed.find('.FeedItemList').jqxListBox({ source: source, width: '100%', height: 300 });

Any suggestions?

Thanks,
Mike

[supportParticipant]

Hi Mike,

The width property of the ListBox can be set to a Number or a string like a Number + ‘px’ like (width: “250px”). Setting the width to ‘100%’ is not a valid value for the width property. I will create a new work item regarding this missing feature and we will implement it in a future version. As a workaround, you can try manually setting the ListBox’s width property to the parent div’s width. You can also bind to the ‘resize‘ event of the parent div and set the ListBox’s width in the event handler.

Hope this helps you.

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[MikeAMember]

Thanks Peter,
I understand your suggestion, I tried to change the width of a Listbox right AFTER the initial init as a test. (through jqwidgets api) However the width of listbox does not change. See these 2 lines of code. I would expect the final width of the Listbox to be 400, but it stays at 100. It seems that after the initial init of the Listbox, the width cannot be changed ?
Feed.find('.FeedItemList').jqxListBox({ source: source, height: Feed.height() - 30, width:100 }); - This does set the width to 100 fine...
Feed.find('.FeedItemList').jqxListBox({ width: 400 }); - This does not change the width of the listbox

As mentioned my scenario is a table with cells, in each cell is a div with a listbox, i want the listboxes to take 100% width of the cell as more cells are added/removed. (thus cell width automatically changes)

Thanks,
Mike

[supportParticipant]

Hi Mike,

Thank you for the feedback.

I tested the reported issue regarding the ‘width’ property and successfully reproduced it. We will fix it for the next build. As a temporary workaround which you can use:

$("#listbox").jqxListBox('beginUpdateLayout');
$("#listbox").jqxListBox({width: 400});
$("#listbox").jqxListBox('resumeUpdateLayout');

Best Regards,
Peter Stoev

http://www.jqwidgets.com
jQWidgets Team

[Author]

Posts