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

    Hi all,

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



    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">
    <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>
    <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);
    <div style='float: left;' id='jqxComboBox'>
    <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>

    Best Wishes,

    jQWidgets Team

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

You must be logged in to reply to this topic.