Reply To: json via php request

[Peter StoevKeymaster]

Hi ScottNL,

The issue here is that the first code makes ‘async’ ajax request and when you build the hierarchy, the dataAdapter may still not be loaded with data and the data may still not be downloaded from your server.

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

The second code is performed when the data is downloaded. The solution here is to set the ‘async’ parameter of the source object to false.

source =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'parentid' },
{ name: 'text' }
],
id: 'id',
async: false,
url: 'ajax/menu.php'
};

To apply links to the items, you can take a look at the code below. The code maps the ‘html’ property instead of the ‘label’ property to the data source’s ‘text’.

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": "<a href='http://jqwidgets.com'>www.jqwidgets.com</a>",
    "parentid": "12"
}]
// 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();
// get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
// the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
// specifies the mapping between the 'text' and 'label' fields.  
var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'html'}]);
$('#jqxWidget').jqxMenu({ source: records, height: 30, theme: theme, width: '400px' });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com