fuelux tree with dynamic datasource

Question

i am using fuelux tree plugin for bootstrap. if data is hard-coded (as below) tree appears correct

var treeDataSource = new DataSource({
     data: [
        { name: 'Test Folder 1', type: 'folder', additionalParameters: { id: 'F1' },
          data: [
            { name: 'Test Sub Folder 1', type: 'folder', additionalParameters: { id: 'FF1' } },
            { name: 'Test Sub Folder 2', type: 'folder', additionalParameters: { id: 'FF2' } },
            { name: 'Test Item 2 in Folder 1', type: 'item', additionalParameters: { id: 'FI2' } }
          ]
        },
        { name: 'Test Folder 2', type: 'folder', additionalParameters: { id: 'F2' } },
        { name: 'Test Item 1', type: 'item', additionalParameters: { id: 'I1' } },
        { name: 'Test Item 2', type: 'item', additionalParameters: { id: 'I2' } }
      ],
  delay: 400
});

please help me to know how can i set the data source dynamically by calling a service (ajax call). i have a service that returns json string.

    var treeDataSource = new DataSource({
        data: //how to pull data from service call 
    });

Below is full code snippet

$(document).ready(
function () 
   {    
        var DataSource = function (options) {
            this._data = options.data;
        };

        var cont = 0;
        DataSource.prototype = {
            columns: function () {
                return this._columns;
            },

            data: function (options, callback) 
            {
                var self = this;
                if (options.search) 
                {
                    callback({ data: 0 , start: 0, end: 0, count: 0, pages: 0, page: 0 });
                } 
                else if (options.data) 
                {
                    callback({ data: options.data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
                } 
                else if (cont == 0) 
                {
                    callback({ data: self._data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
                }
                else 
                {
                    callback({ data: 0, start: 0, end: 0, count: 0, pages: 0, page: 0 });
                }
                cont = cont+1;
            }
        }

        var treeDataSource = new DataSource({
            data: //how to pull data from service call and assign (how do i call a service here)
        });

        $('#MyTree').tree({
            dataSource: treeDataSource
        });

        $('#tree-selected-items').on('click', function() {
            console.log("selected items: ", $('#MyTree').tree('selectedItems'));
        });

        $('#MyTree').on('loaded', function(evt, data) {
            console.log('tree content loaded');
        });

        $('#MyTree').on('opened', function(evt, data) {
            if(data.moduleId != 0)
            {
                SetModuleInfoInSession(data.moduleId,data.moduleName,data.url);
            }
            console.log('sub-folder opened: ', data);
        });

        $('#MyTree').on('closed', function(evt, data) {
            console.log('sub-folder closed: ', data);
        });

        $('#MyTree').on('selected', function(evt, data) {
            console.log('item selected: ', data);
        });
    });

Answer 1

Here's a helper method which was provided in the Ace Admin Web App framework I'm using.. makes it very easy to use:

           //IN YOUR DOCUMENT.READY() 

            var DataSourceTree = function (options) {
                this.url = options.url;
            }

            DataSourceTree.prototype.data = function (options, callback) {
                var self = this;
                var $data = null;

                var param = null

                if (!("name" in options) && !("type" in options)) {
                    param = 0;//load the first level  
                }
                else if ("type" in options && options.type == "folder") {
                    if ("additionalParameters" in options && "children" in options.additionalParameters) {
                        param = options.additionalParameters["id"];
                    }
                }

                if (param != null) {                    
                    $.ajax({
                        url: this.url,
                        data: 'id=' + param,
                        type: 'POST',
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == "OK") 
                                callback({ data: response.data })
                        },
                        error: function (response) {
                            //console.log(response);
                        }
                    })
                }
            };

     $('#[YOURTREEVIEWID]').tree({
            dataSource: new DataSourceTree({ url: '[PATH TO SERVICE]' }),
            multiSelect: false,
            loadingHTML: '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
            'open-icon': 'icon-minus',
            'close-icon': 'icon-plus',
            'selectable': true,
            'selected-icon': 'icon-ok',
            'unselected-icon': 'icon-remove'
        });

The sample Data should be returned something like this:

{"status":"OK","
    data":[
           {"id":1,"name":"label 1","type":"folder","additionalParameters":     
                      {"id":1,"children":true,"itemSelected":false}},
           {"id":2,"name":"label 2","type":"item","additionalParameters":        
                     {"id":2,"children":false,"itemSelected":false}},
           {"id":3,"name":"label 3","type":"item","additionalParameters":      
                    {"id":3,"children":false,"itemSelected":false}}
            ]}