jqxTree Updated

by Nayana Das

HTML

<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/angular.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtree.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.1/q.js"></script>
<div ng-app="App" ng-controller="ExampleController">
    <div jqx-tree settings="settings" source="source"></div>
    <button ng-click="simulatePromiseResult()">Simulate Promise Result</button>
</div>

JavaScript

angular.module('App', [])
.controller('ExampleController', function ($scope, $timeout) {
    $scope.settings = {
        height: 300,
        width: 500
    };
    
    $scope.source = [];
    
    function simulatePromise() {
        var deferred = Q.defer();
        
        // wait 2000ms until we run this and resolve the promise
        $timeout(function () {
            var dataAdapter = new $.jqx.dataAdapter({
                datatype: 'json',
                datafields: [
                    {name: 'id'},
                    {name: 'parentid'},
                    {name: 'text'},
                    {name: 'value'}
                ],
                id: 'id',
                localdata: [
                    {id: 1, parentid: -1, text: 'Chocolate Beverage', value: '$2.3'},
                    {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'},
                    {id: 6, parentid: -1, text: 'Espresso Beverage', value: '$2.3'},
                    {id: 7, parentid: 6, text: 'Caffe Americano', value: '$2.3'},
                    {id: 8, parentid: 6, text: 'Caffe Latte', value: '$2.3'},
                    {id: 9, parentid: 6, text: 'Caffe Mocha', value: '$2.3'},
                    {id: 10, parentid: 6, text: 'Cappuccino', value: '$2.3'},
                    {id: 11, parentid: 6, text: 'Pumpkin Spice Latte', value: '$2.3'},
                    {id: 12, parentid: -1, text: 'Frappuccino', value: '$2.3'},
                    {id: 13, parentid: 12, text: 'Caffe Vanilla Frappuccino', value: '$2.3'},
                    {id: 14, parentid: 12, text: 'Caffe Vanilla Frappuccino Light', value: '$2.3'},
                    {id: 15, parentid: 13, text: '450 calories', value: '$2.3'},
            ...