jQuery UI Widgets Forums Lists ListBox Refreshing the ListBox

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Refreshing the ListBox #8386


    How can I change the source (dataadapter) of the ListBox and resresh it? I didn’t find the refresh method for listbox.
    Is there a example when I press the button, source has changed and content of listbox is changed?

    Refreshing the ListBox #8401


    Hello SpaceQuester,

    Here is an example that reassigns a new source to the jqxListBox:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
    <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items." />
    <title id='Description'>In this demo the jqxListBox is bound to JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
    type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxlistbox.js"></script>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    // prepare the data
    var source =
    datatype: "json",
    datafields: [
    { name: 'CompanyName' },
    { name: 'ContactName' }
    id: 'id',
    url: '../../demos/sampledata/customers.txt'
    var dataAdapter = new $.jqx.dataAdapter(source);
    var newSource =
    datatype: "json",
    datafields: [
    { name: 'name' },
    { name: 'type' }
    id: 'id',
    url: '../beverages.txt'
    var newDataAdapter = new $.jqx.dataAdapter(newSource);
    // Create a jqxListBox
    $("#jqxWidget").jqxListBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250, theme: '' });
    $("#jqxWidget").bind('select', function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var valueelement = $("<div></div>");
    valueelement.html("Value: " + item.value);
    var labelelement = $("<div></div>");
    labelelement.html("Label: " + item.label);
    $("#changeSource").click(function () {
    $("#jqxWidget").jqxListBox({ source: newDataAdapter, displayMember: "name", valueMember: "type" });
    <div id='jqxWidget'>
    <button id="changeSource">
    Change source</button>
    <div id="selectionlog">

    Best Regards,

    jQWidgets team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.