jQWidgets Forums

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

Tagged: ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    comboBox with multiple value using JSON Posts
  • March 14, 2013 at 1:03 am comboBox with multiple value using JSON #17015

    kamran
    Member

    Hi all,

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

    Thanks,

    March 14, 2013 at 9:59 am comboBox with multiple value using JSON #17065

    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

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

You must be logged in to reply to this topic.