Blogs

In the next version of jQWidgets, the jqxDataAdapter plug-in will come with data binding improvements. These improvements will allow you to use the plug-in to populate the jqxTree or jqxMenu from JSON, JSONP, XML, CSV, TSV or Array. Let’s see how the new functionality works. We will use the JSON below to populate the jqxMenu widget.

var data = [
{
	"text": "Chocolate Beverage",
	"id": "1",
	"parentid": "-1",
	"subMenuWidth": '250px'
}, {
	"id": "2",
	"parentid": "1",
	"text": "Hot Chocolate"
}, {
	"id": "3",
	"parentid": "1",
	"text": "Peppermint Hot Chocolate"
}, {
	"id": "4",
	"parentid": "1",
	"text": "Salted Caramel Hot Chocolate"
}, {
	"id": "5",
	"parentid": "1",
	"text": "White Hot Chocolate"
}, {
	"id": "6",
	"text": "Espresso Beverage",
	"parentid": "-1",
	"subMenuWidth": '200px'
}, {
	"id": "7",
	"parentid": "6",
	"text": "Caffe Americano"
}, {
	"id": "8",
	"text": "Caffe Latte",
	"parentid": "6"
}, {
	"id": "9",
	"text": "Caffe Mocha",
	"parentid": "6"
}, {
	"id": "10",
	"text": "Cappuccino",
	"parentid": "6"
}, {
	"id": "11",
	"text": "Pumpkin Spice Latte",
	"parentid": "6"
}, {
	"id": "12",
	"text": "Frappuccino",
	"parentid": "-1",
	"subMenuWidth": '250px'
}, {
	"id": "13",
	"text": "Caffe Vanilla Frappuccino",
	"parentid": "12"
}, {
	"id": "15",
	"text": "450 calories",
	"parentid": "13"
}, {
	"id": "16",
	"text": "16g fat",
	"parentid": "13"
}, {
	"id": "17",
	"text": "13g protein",
	"parentid": "13"
}, {
	"id": "14",
	"text": "Caffe Vanilla Frappuccino Light",
	"parentid": "12"
}]
The next step is to create the jqxDataAdapter. 
// prepare the data
var source =
{
	datatype: "json",
	datafields: [
		{ name: 'id' },
		{ name: 'parentid' },
		{ name: 'text' },
		{ name: 'subMenuWidth' }
	],
	id: 'id',
	localdata: data
};
// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();

Now, let’s set the parent-child relationship in our Data and get the loaded records. The new method of the jqxDataAdapter is called ‘getRecordsHierarchy’. It has 4 params, the last 2 of which are optional. The first parameter is the field’s id. The second parameter represents the parent field’s id. These parameters should point to a valid ‘datafield’ from the Data Source. The third parameter which is optional specifies the name of the ‘children’ collection. The last parameter specifies the mapping between the Data Source fields and custom data fields. In the code below, we set a mapping between a ‘text’ field and ‘label’ field. The reason we are doing that is because the Menu Items do not have a ‘text’ property, but they have a ‘label’ property. The returned value from the ‘getRecordsHierarchy’ method is an Array.

var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);

The final step is to create the jqxMenu widget and set the Menu’s ‘source’ property to the ‘records’ array.

$('#jqxWidget').jqxMenu({ source: records, height: 30, theme: 'darkblue', width: '400px' });