jQWidgets Forums
jQuery UI Widgets › Forums › Lists › ComboBox › comboBox with multiple value using JSON
Tagged: checkboxes, jqxComboBox
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
-
Hi all,
Is there anyway to set MULTIPLE values to comboBox using JSON for data source?
Thanks,
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,
MariyajQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.