Documentation
Getting Started
The jqxListBox represents a jQuery listbox widget that contains a list of selectable items.Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.
The first step is to create html page and add links to the javascript files and css dependencies to your project. The jqxListBox widget requires the following files:
<head><link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/><script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script><script type="text/javascript" src="../../jqwidgets/jqxcore.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 async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
The next step is to create a div element within the body of the html document.
<div id='jqxlistbox'></div>
The last step is to initialize the widget by adding the following script to the html document:
var source = [ "Instant coffee", "Irish coffee", "Liqueur coffee"];// Create a jqxListBox$("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '250px',});
To call a function(method), you need to pass the method name and parameters(if any) in the jqxListBox’s constructor.
To get the result of a function(method) call, you need to pass the method name in the jqxListBox’s constructor.$("#jqxlistbox").jqxListBox(‘selectIndex’, 1);
To set a property(option), you need to pass the property name and value(s) in the jqxListBox's constructor.$("#jqxlistbox").jqxListBox(‘getSelectedIndex’);
To get a property(option), you need to pass the property name to the jqxListBox's constructor.$("#jqxlistbox").jqxListBox({ checkboxes: false });
To bind to an event of a UI widget, you can use basic jQuery syntax. Let’s suppose that you want to get the selected item when the user clicks. The example code below demonstrates how to bind to the ‘select’ event of jqxListBox.var checkboxes = $("#jqxlistbox").jqxListBox('checkboxes');
$('#jqxListBox').on('select', function (event) {var args = event.args;var item = $('#jqxListBox').jqxListBox('getItem', args.index);});
Basic Sample
<!DOCTYPE html><html lang="en"><head> <title>jQuery ListBox Sample</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.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 async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var source = [ "Affogato", "Americano", "Bicerin", "Breve", "Café Bombón", "Café au lait", "Caffé Corretto", "Café Crema", "Caffé Latte", ]; // Create a jqxListBox $("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px' }); // disable the sixth item. $("#jqxlistbox").jqxListBox('disableAt', 5); // bind to 'select' event. $('#jqxlistbox').bind('select', function (event) { var args = event.args; var item = $('#jqxlistbox').jqxListBox('getItem', args.index); $("#eventlog").html('Selected: ' + item.label); }); $("#button").jqxButton(); $("#button").click(function () { var item = $('#jqxlistbox').jqxListBox('getSelectedItem'); if (item != null) { alert(item.label); } }); }); </script> <div id='jqxlistbox'> </div> <div style="margin-top: 10px;"> <input id="button" type="button" value="Get Selected Item" /> <div id="eventlog"></div> </div> </div></body></html>
The result of the above code is:
Bind the ListBox to JSON data
To bind the ListBox to JSON, XML, CSV, TSV or Array, you need to use the jqx.dataAdapter plug-in and also to set the ListBox's displayMember and valueMember properties to point to data source fields.<!DOCTYPE html><html lang="en"><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 JSON data.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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 async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { datatype: "json", datafields: [ { name: 'CompanyName' }, { name: 'ContactName' } ], id: 'id', url: 'customers.txt' }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxListBox $("#jqxWidget").jqxListBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250, theme: '' }); $("#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); } } }); }); </script> <div id='jqxWidget'> </div> <div id="selectionlog"></div> </div></body></html>
The result of the above code is:
Below is the JSON data that we use as a data source
[{"CompanyName":"Alfreds Futterkiste","ContactName":"Maria Anders","ContactTitle":"Sales Representative","Address":"Obere Str. 57","City":"Berlin","Country":"Germany"},{"CompanyName":"Ana Trujillo Emparedados y helados","ContactName":"Ana Trujillo","ContactTitle":"Owner","Address":"Avda. de la Constitucin 2222","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Antonio Moreno Taquera","ContactName":"Antonio Moreno","ContactTitle":"Owner","Address":"Mataderos 2312","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Around the Horn","ContactName":"Thomas Hardy","ContactTitle":"Sales Representative","Address":"120 Hanover Sq.","City":"London","Country":"UK"},{"CompanyName":"Berglunds snabbkp","ContactName":"Christina Berglund","ContactTitle":"Order Administrator","Address":"Berguvsvgen 8","City":"Lule","Country":"Sweden"},{"CompanyName":"Blauer See Delikatessen","ContactName":"Hanna Moos","ContactTitle":"Sales Representative","Address":"Forsterstr. 57","City":"Mannheim","Country":"Germany"},{"CompanyName":"Blondesddsl pre et fils","ContactName":"Frdrique Citeaux","ContactTitle":"Marketing Manager","Address":"24, place Klber","City":"Strasbourg","Country":"France"},{"CompanyName":"Blido Comidas preparadas","ContactName":"Martn Sommer","ContactTitle":"Owner","Address":"C\/ Araquil, 67","City":"Madrid","Country":"Spain"},{"CompanyName":"Bon app'","ContactName":"Laurence Lebihan","ContactTitle":"Owner","Address":"12, rue des Bouchers","City":"Marseille","Country":"France"},{"CompanyName":"Bottom-Dollar Markets","ContactName":"Elizabeth Lincoln","ContactTitle":"Accounting Manager","Address":"23 Tsawassen Blvd.","City":"Tsawassen","Country":"Canada"},{"CompanyName":"B's Beverages","ContactName":"Victoria Ashworth","ContactTitle":"Sales Representative","Address":"Fauntleroy Circus","City":"London","Country":"UK"},{"CompanyName":"Cactus Comidas para llevar","ContactName":"Patricio Simpson","ContactTitle":"Sales Agent","Address":"Cerrito 333","City":"Buenos Aires","Country":"Argentina"},{"CompanyName":"Centro comercial Moctezuma","ContactName":"Francisco Chang","ContactTitle":"Marketing Manager","Address":"Sierras de Granada 9993","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Chop-suey Chinese","ContactName":"Yang Wang","ContactTitle":"Owner","Address":"Hauptstr. 29","City":"Bern","Country":"Switzerland"},{"CompanyName":"Comrcio Mineiro","ContactName":"Pedro Afonso","ContactTitle":"Sales Associate","Address":"Av. dos Lusadas, 23","City":"Sao Paulo","Country":"Brazil"},{"CompanyName":"Consolidated Holdings","ContactName":"Elizabeth Brown","ContactTitle":"Sales Representative","Address":"Berkeley Gardens 12 Brewery","City":"London","Country":"UK"},{"CompanyName":"Drachenblut Delikatessen","ContactName":"Sven Ottlieb","ContactTitle":"Order Administrator","Address":"Walserweg 21","City":"Aachen","Country":"Germany"},{"CompanyName":"Du monde entier","ContactName":"Janine Labrune","ContactTitle":"Owner","Address":"67, rue des Cinquante Otages","City":"Nantes","Country":"France"},{"CompanyName":"Eastern Connection","ContactName":"Ann Devon","ContactTitle":"Sales Agent","Address":"35 King George","City":"London","Country":"UK"},{"CompanyName":"Ernst Handel","ContactName":"Roland Mendel","ContactTitle":"Sales Manager","Address":"Kirchgasse 6","City":"Graz","Country":"Austria"}]