Html5 Tree

Invoke the selectItem method of the jqxTree. Author: http://jqwidgets.com

by txhi

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget'></div><br>
<button id='jqxBtn'>Action</button>
<div id='log'></div>

JavaScript

var data = [
{ 
		"id": "2",
    "parentid": "1",
    "text": "Hot Chocolate",
    "value": "$2.3"
}, {
    "id": "3",
    "parentid": "1",
    "text": "Peppermint Hot Chocolate",
    "value": "$2.3"
}, {
    "id": "4",
    "parentid": "1",
    "text": "Salted Caramel Hot Chocolate",
    "value": "$2.3"
}, {
    "id": "5",
    "parentid": "1",
    "text": "White Hot Chocolate",
    "value": "$2.3"
}, {
    "text": "Chocolate Beverage",
    "id": "1",
    "parentid": "-1",
    "value": "$2.3"
}, {
    "id": "6",
    "text": "Espresso Beverage",
    "parentid": "-1",
    "value": "$2.3"
}, {
    "id": "7",
    "parentid": "6",
    "text": "Caffe Americano",
    "value": "$2.3"
    }, {
    "id": "8",
    "text": "Caffe Latte",
    "parentid": "6",
    "value": "$2.3"
}, {
    "id": "9",
    "text": "Caffe Mocha",
    "parentid": "6",
    "value": "$2.3"
    }, {
    "id": "10",
    "text": "Cappuccino",
    "parentid": "6",
    "value": "$2.3"
}, {
    "id": "11",
    "text": "Pumpkin Spice Latte",
    "parentid": "6",
    "value": "$2.3"
}, {
    "id": "12",
    "text": "Frappuccino",
    "parentid": "-1"
}, {
    "id": "13",
    "text": "Caffe Vanilla Frappuccino",
    "parentid": "12",
    "value": "$2.3"
    }, {
    "id": "15",
    "text": "450 calories",
    "parentid": "13",
    "value": "$2.3"
}, {
    "id": "16",
    "text": "16g fat",
    "parentid": "13",
    "value": "$2.3"
    }, {
    "id": "17",
    "text": "13g protein",
    "parentid": "13",
    "value": "$2.3"
}, {
    "id": "14",
    "text": "Caffe Vanilla Frappuccino Light",
    "parentid": "12",
    "value": "$2.3"
}];

// prepare the data
var source =
{
    datatype: "json",
    datafields: [
        { name: 'id' },
        { name: 'parentid' },
        { name: 'text' },
        { name: 'value' }
    ],
    id: 'id',
    localdata: data
};

// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();
// get the tree items. The first...