jQuery UI Widgets › Forums › Lists › ListBox › Refreshing the ListBox

Tagged: , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Refreshing the ListBox Posts
  • September 24, 2012 at 4:26 pm Refreshing the ListBox #8386

    SpaceQuester
    Member

    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?

    September 25, 2012 at 6:24 am Refreshing the ListBox #8401

    Dimitar
    Participant

    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">
    <head>
        <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>
    </head>
    <body>
        <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);
                                $("#selectionlog").children().remove();
                                $("#selectionlog").append(labelelement);
                                $("#selectionlog").append(valueelement);
                            }
                        }
                    });
                    $("#changeSource").click(function () {
                        $("#jqxWidget").jqxListBox({ source: newDataAdapter, displayMember: "name", valueMember: "type" });
                    });
                });
            </script>
            <div id='jqxWidget'>
            </div>
            <button id="changeSource">
                Change source</button>
            <div id="selectionlog">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.