jQuery UI Widgets Forums Lists ListBox Initiate Checkbox when it loads the data

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Initiate Checkbox when it loads the data #7358

    rdatilio
    Participant

    Is it possible to start a listbox that loads XML data from a URL with the checkbox checked or not.

    Initiate Checkbox when it loads the data #7370

    Dimitar
    Participant

    Hello rdatilio,

    Here is an example that shows how to check an element after the list has been loaded from XML:

    <!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 XML data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    var url = "../demos/sampledata/customers.xml";
    // prepare the data
    var source =
    {
    datatype: "xml",
    datafields: [
    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:CustomerID',
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false });
    // Create a jqxListBox
    $("#jqxWidget").jqxListBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250, theme: theme, checkboxes: true });
    $("#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);
    }
    }
    });
    $("#jqxWidget").jqxListBox('checkIndex', 3);
    });
    </script>
    <div id='jqxWidget'>
    </div>
    <div style="font-size: 13px; font-family: Verdana;" id="selectionlog">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.