Blogs

In this post, we will show you how to use one of the new features of the jqxListBox widget and especially the capability to customize the rendering of each listbox item. 1. Add the Theme files in the head section of your page.

<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="styles/jqx.fresh.css" type="text/css" />

2. Add the JavaScript files.

<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/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/jqxdata.js"></script>

3. In the HTML body, add a DIV tag with id attribute set to ‘listbox’.

<div id="listbox">
</div>

4. In the $(document).ready function, create a sample data array and an instance of the jqxDataAdapter plug-in. Load the data array into the jqxDataAdapter.

// prepare the data
var data = new Array();
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
for (var i = 0; i < firstNames.length; i++) {
	var row = {};
	row["firstname"] = firstNames[i];
	row["lastname"] = lastNames[i];
	row["title"] = titles[i];
	data[i] = row;
}
var source =
{
	localdata: data,
	datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);

5. Select the ‘listbox’ DIV tag with jQuery and call the jqxListBox constructor function. In order to customize the rendering of the listbox items, you need to set the jqxListBox’s renderer field to point to a function which has 3 params – the index of the rendered listbox item, its label and its value. The rendering function returns a HTML string to be applied to the rendered listbox item.

$('#listbox').jqxListBox({ selectedIndex: 0, theme: 'fresh', source: dataAdapter, displayMember: "firstname", itemHeight: 70, height: 300, width: 400,
	renderer: function (index, label, value) {
		var datarecord = data[index];
		var imgurl = '../../images/' + label.toLowerCase() + '.png';
		var img = '<img height="50" width="45" src="' + imgurl + '"/>';
		var table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + datarecord.firstname + " " + datarecord.lastname + '</td></tr><tr><td>' + datarecord.title + '</td></tr></table>';
		return table;
	}
});