CODEWITHSUNDEEP
fuelux
Greg Svitak
Greg Svitak

Reputation: 485

Preload entire FuelUx tree in one ajax call

I am trying to use the FuelEx tree control. I do not want to load each node on the tree when the user selects the node. I would rather load the entire tree structure at the point the pages loads. I have a controller already built that builds the correct json for my entire tree.

Is there an example of how to preload the entire structure?

I am currently attempting to use the following as a starting point. I will convert it a Datasource object once I get it working correctly.

  $('#myTree').tree({
    dataSource: function(options, callback){

    var self = this;
    var param = null;

    if ("type" in options && options.type == "folder") {
        if ("dataAttributes" in options && "children" in options.dataAttributes) {
            param = options.dataAttributes["id"];
        }
    }

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


    setTimeout(function () {
        callback({ data: [
            { name: 'Ascending and Descending', type: 'folder', dataAttributes: { id: 'folder1' } },
            { name: 'Sky and Water I (with custom icon)', type: 'item', dataAttributes: { id: 'item1', 'data-icon': 'glyphicon glyphicon-file' } },
            { name: 'Drawing Hands', type: 'folder', dataAttributes: { id: 'folder2' } },
            { name: 'Waterfall', type: 'item', dataAttributes: { id: 'item2' } },
            { name: 'Belvedere', type: 'folder', dataAttributes: { id: 'folder3' } },
            { name: 'Relativity (with custom icon)', type: 'item', dataAttributes: { id: 'item3', 'data-icon': 'glyphicon glyphicon-picture' } },
            { name: 'House of Stairs', type: 'folder', dataAttributes: { id: 'folder4' } },
            { name: 'Convex and Concave', type: 'item', dataAttributes: { id: 'item4' } }
        ]});

    }, 400);
  },
    multiSelect: true,
    cacheItems: true,
    folderSelect: false,
  });
    $('#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) {
        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);
    });

Thanks, Greg

Upvotes: 0

Views: 979

Answers (1)

Interactive Llama
Interactive Llama

Reputation: 780

You do not have to use the dataSource function to call an external API each time. You can call the external API the first time dataSource is run and return the top level folders in the callback's data object. Then, the next time, do not make the ajax request and index into the collection of all items object based on the folder opened.

If that was unclear, load the object with all the tree information once at the beginning and grab whatever children you need out of it when a folder is opened based on that folder's attributes.

You have to load items each time--there is no other way with this control, but the items can be cached in memory and do not require an external network request.

Upvotes: 1

Related Questions