jQuery UI Widgets Forums Lists ComboBox comboBox with multiple value using JSON

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

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

  • kamran
    Member

    Hi all,

    Is there anyway to set MULTIPLE values to comboBox using JSON for data source?

    Thanks,


    support
    Participant

    Hi Kamran,

    Unforchantly you can not select multiple values using jqxComboBox when the checkboxes property is set to false. Multiple selection is possible when the checkboxes property is set to true and the jqxCheckBox is included. To select multiple items please take a look at the following example:

    <!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>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.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/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var url = "customers.txt";
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'CompanyName' },
    { name: 'ContactName' }
    ],
    id: 'id',
    url: url,
    async: false
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // Create a jqxComboBox
    $("#jqxComboBox").jqxComboBox({ checkboxes: true, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25 });
    $("#jqxComboBox").jqxComboBox('checkIndex', 0);
    $("#jqxComboBox").jqxComboBox('checkIndex', 3);
    $("#jqxComboBox").jqxComboBox('checkIndex', 4);
    });
    </script>
    <div>
    <div style='float: left;' id='jqxComboBox'>
    </div>
    <div style="float: left; margin-left: 20px; font-size: 13px; font-family: Verdana;">
    <div id="selectionlog"></div>
    <div style='max-width: 300px; margin-top: 20px;' id="checkedItemsLog"></div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Wishes,
    Mariya

    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.