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

Tagged: , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Initiate Checkbox when it loads the data Posts
  • August 31, 2012 at 6:38 pm 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.

    September 3, 2012 at 6:13 am 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/

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

You must be logged in to reply to this topic.