How to rebind new datasource to existing Listbox?
By default, while rebinding the datasource to Listbox control, it automatically clears the list item first and then renders the control with the newly updated datasource.
Refer the following code examples to rebind the new datasource.
HTML
<div id="lb" data-role="ejmlistbox" data-ej-databinding="true" data-ej-datasource="window.dbitem1"> </div> <input id="button" type="button" data-role="ejmbutton" data-ej-text="Clear" data-ej-touchend="touchEnd" /> |
Script
<script> window.dbitem1 = [ { "text": "Hot Singles" }, { "text": "Rising Artists" }, { "text": "Live Music" }, { "text": "Best of 2013 So Far" }, { "text": "Hip-Hop and R&B Sale"}]; window.dbitem2 = [ { "text": "Music" }, { "text": "Videos" }, { "text": "Chat" }, { "text": "Others" }]; function touchEnd() { $('#lb').ejmListbox("clear"); $("#lb").ejmListbox({ dataSource: "window.dbitem2" }); } </script> |
