In this post, we will show you how to populate the ListBox from XML Data Source.
1. Add references to the following javascript and CSS files. We will use the Data Adapter plug-in and we need to load the jqxdata.js file. jqxListBox internally uses the ScrollBar widget and we load the jqxscrollbar.js and jqxbuttons.js.
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /><link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" /><script type="text/javascript" src="scripts/jquery-1.7.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>
2. Create the ListBox’s source object. In the source object’s implementation, we need to set the ‘datatype’ property to ‘xml’. The ‘id’ member points to the data record’s id in the data source. If there’s no ‘id’, you may not define this member. The ‘record’ member specifies the data record’s name in the data source. The ‘root’ member specifies the data record’s root xml node. In the ‘datafields’ member definition, we need to set the ‘name’ property of each datafield and also the path to the field(if necessary). When you pass the source object as parameter to the jqxDataAdapter plug-in, it will try to find all data records based on the ‘datafields’, ‘root’ and ‘record’ definitions.
var url = "../sampledata/customers.xml";// prepare the data
var source =
{
datatype:
"xml",
datafields: [
{ name:
'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
{ name:
'ContactName', map: 'm\\:properties>d\\:ContactName' },
],
root:
"entry",
record:
"content",
id:
'm\\:properties>d\\:CustomerID',
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);
3. Here are the contents of the customers.xml file.
<?xml version="1.0" encoding="utf-8" standalone="yes"?><feed xml:base="http://services.odata.org/Northwind/Northwind.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom"><title type="text">Customers
</title><updated>2011-11-30T11:39:28Z
</updated><link rel="self" title="Customers" href="Customers" /><entry> <title type="text"></title> <updated>2011-11-30T11:39:28Z
</updated> <author> <name /> </author> <content type="application/xml"> <m:properties> <d:CustomerID>ALFKI
</d:CustomerID> <d:CompanyName>Alfreds Futterkiste
</d:CompanyName> <d:ContactName>Maria Anders
</d:ContactName> <d:ContactTitle>Sales Representative
</d:ContactTitle> <d:Address>Obere Str. 57
</d:Address> <d:City>Berlin
</d:City> </m:properties> </content></entry><entry> <title type="text"></title> <updated>2011-11-30T11:39:28Z
</updated> <author> <name /> </author> <content type="application/xml"> <m:properties> <d:CustomerID>ANATR
</d:CustomerID> <d:CompanyName>Ana Trujillo Emparedados y helados
</d:CompanyName> <d:ContactName>Ana Trujillo
</d:ContactName> <d:ContactTitle>Owner
</d:ContactTitle> <d:Address>Avda. de la Constitución 2222
</d:Address> <d:City>México D.F.
</d:City> </m:properties> </content></entry><entry> <title type="text"></title> <updated>2011-11-30T11:39:28Z
</updated> <author> <name /> </author> <content type="application/xml"> <m:properties> <d:CustomerID>ANTON
</d:CustomerID> <d:CompanyName>Antonio Moreno Taquería
</d:CompanyName> <d:ContactName>Antonio Moreno
</d:ContactName> <d:ContactTitle>Owner
</d:ContactTitle> <d:Address>Mataderos 2312
</d:Address> <d:City>México D.F.
</d:City> </m:properties> </content></entry><entry> <title type="text"></title> <updated>2011-11-30T11:39:28Z
</updated> <author> <name /> </author> <content type="application/xml"> <m:properties> <d:CustomerID>AROUT
</d:CustomerID> <d:CompanyName>Around the Horn
</d:CompanyName> <d:ContactName>Thomas Hardy
</d:ContactName> <d:ContactTitle>Sales Representative
</d:ContactTitle> <d:Address>120 Hanover Sq.
</d:Address> <d:City>London
</d:City> </m:properties> </content></entry><entry> <title type="text"></title> <updated>2011-11-30T11:39:28Z
</updated> <author> <name /> </author> <content type="application/xml"> <m:properties> <d:CustomerID>BERGS
</d:CustomerID> <d:CompanyName>Berglunds snabbköp
</d:CompanyName> <d:ContactName>Christina Berglund
</d:ContactName> <d:ContactTitle>Order Administrator
</d:ContactTitle> <d:Address>Berguvsvägen 8
</d:Address> <d:City>Luleå
</d:City> </m:properties> </content></entry><entry> <title type="text"></title> <updated>2011-11-30T11:39:28Z
</updated> <author> <name /> </author> <content type="application/xml"> <m:properties> <d:CustomerID>BLAUS
</d:CustomerID> <d:CompanyName>Blauer See Delikatessen
</d:CompanyName> <d:ContactName>Hanna Moos
</d:ContactName> <d:ContactTitle>Sales Representative
</d:ContactTitle> <d:Address>Forsterstr. 57
</d:Address> <d:City>Mannheim
</d:City> </m:properties> </content></entry><entry> <title type="text"></title> <updated>2011-11-30T11:39:28Z
</updated> <author> <name /> </author> <content type="application/xml"> <m:properties> <d:CustomerID>BLONP
</d:CustomerID> <d:CompanyName>Blondesddsl père et fils
</d:CompanyName> <d:ContactName>Frédérique Citeaux
</d:ContactName> <d:ContactTitle>Marketing Manager
</d:ContactTitle> <d:Address>24, place Kléber
</d:Address> <d:City>Strasbourg
</d:City> </m:properties> </content></entry><entry> <title type="text"></title> <updated>2011-11-30T11:39:28Z
</updated> <author> <name /> </author> <content type="application/xml"> <m:properties> <d:CustomerID>BOLID
</d:CustomerID> <d:CompanyName>Bólido Comidas preparadas
</d:CompanyName> <d:ContactName>Martín Sommer
</d:ContactName> <d:ContactTitle>Owner
</d:ContactTitle> <d:Address>C/ Araquil, 67
</d:Address> <d:City>Madrid
</d:City> </m:properties> </content></entry><entry> <title type="text"></title> <updated>2011-11-30T11:39:28Z
</updated> <author> <name /> </author> <content type="application/xml"> <m:properties> <d:CustomerID>BONAP
</d:CustomerID> <d:CompanyName>Bon app'
</d:CompanyName> <d:ContactName>Laurence Lebihan
</d:ContactName> <d:ContactTitle>Owner
</d:ContactTitle> <d:Address>12, rue des Bouchers
</d:Address> <d:City>Marseille
</d:City>
4. Create a new DIV tag with id=”ListBox”.
<div id='ListBox'>
5. Select the “ListBox” DIV tag and call the jqxListBox constructor. The ‘displayMember’ and ‘valueMember’ properties specify the names of the object properties that are contained in the collection specified by the source property. During the ListBox’s initialization, each list item’s ‘label’ property will be set to point to an object property specified by the ‘displayMember’ and the item’s ‘value’ property will point to an object property specified by the ‘valueMember’ property.
$("#ListBox").jqxListBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250, theme: 'classic' });