Blogs

In this post, we will add a DropDownList to a web page and will load it from XML data source. 1. The first step is to include the required javascript and css files.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.darkblue.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.2.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/jqxdropdownlist.js"></script>

2. Add a DIV tag to the document’s body.

<div id='jqxWidget'>
</div>

3. Inside the jQuery’s ready function, create a source object. As we want to load data from XML data source, the source object’s datatype is set to ‘xml’. The ‘root’ field specifies the data collection’s root node in the XML. The ‘record’ field is the name of a xml node which will be displayed as a row in the Grid. The datafields array specifies the fields from the record that will be loaded in the Grid. To create the jqxDropDownList, select the DIV tag and call the jqxDropDownList constructor. The valueMember and displayMember properties specify the displayed text and the value of each list item.

<script type="text/javascript">
	$(document).ready(function () {
		// 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: 'customers.xml'
		};
		var dataAdapter = new $.jqx.dataAdapter(source, { async: false });
		// Create a jqxDropDownList
		$("#jqxWidget").jqxDropDownList({ selectedIndex: 0, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: 'darkblue' });
	});
</script>