FuelUX Tree dataSource options undefined

Question

I'm trying to implement a treeview using FuelUX.

So far I managed to setup the example from the website:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fuel UX Basic Template (Globals)</title>
    <!-- CSS -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://www.fuelcdn.com/fuelux/3.0.2/css/fuelux.min.css" rel="stylesheet">



  </head>
  <body class="fuelux">


    <ul class="tree fuelux" role="tree" id="myTree">
                                    <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
                                        <div class="tree-branch-header">
                                            <button class="tree-branch-name">
                                                <span class="glyphicon icon-caret glyphicon-play"></span>
                                                <span class="glyphicon icon-folder glyphicon-folder-close"></span>
                                                <span class="tree-label"></span>
                                            </button>
                                        </div>
                                        <ul class="tree-branch-children" role="group"></ul>
                                        <div class="tree-loader" role="alert">Loading...</div>
                                    </li>
                                    <li class="tree-item hide" data-template="treeitem" role="treeitem">
                                        <button class="tree-item-name">
                                            <span class="glyphicon icon-item fueluxicon-bullet"></span>
                                            <span class="tree-label"></span>
                                        </button>
                                    </li>
                                </ul>

    <!-- jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://www.fuelcdn.com/fuelux/3.0.2/js/fuelux.min.js"></script>

   <script>

        $(document).ready(function() {

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

                      var self = this;
                      var param = null

                      console.log(options.type);

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

                    if (param != null) {
                        $.ajax({
                            url: "@routes.FileController.getFolderStructure()",
                            type: 'POST',
                            params: {
                                contentType: 'application/json; charset=utf-8'
                            },
                            dataType: 'json',
                            data: JSON.stringify({ id: 1 }),
                            success: function (response) {
                                callback(response)
                            },
                            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,
                });

            });

    </script>


  </body>
</html>

Unfortunately the options parameter passed in "dataSource" does not have the properties (type, dataAttributes etc.).

What am I doing wrong? How can I set these parameters?

Thanks

Interactive Llama · Accepted Answer · 2014-10-04T22:12:54.640

I am getting an options.type of "folder". As for options.children, it doesn't appear in your callback data object of items/folders.

This works for me:

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

var self = this;
var param = null

console.log(options.type);

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

if (param != null) {
    $.ajax({
        url: "@routes.FileController.getFolderStructure()",
        data: 'id=' + param,
        type: 'POST',
        dataType: 'json',
        success: function (response) {
            callback(response)
        },
        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,
});

All I did was copy the above into index.js in the Fuel UX repo and added the condole.log. It outputs "folder" when opening "Ascending and Descending" which is the type of that item.

Thanks for your help. The problem is, that "type" is not available in "options" for me.. — dominik, Oct 04 '14 at 10:26
Whenever I try to log `options.type` I receive "undefined". I've updated my question with a complete html document to test. — dominik, Oct 05 '14 at 12:09
It may be a bug that is not fixed in 3.0.2, I may be using the 3.1.0-WIP branch. I posted an updated dist folder in this branch below. Try your code with the following fuelux.js file. https://raw.githubusercontent.com/ExactTarget/fuelux/updated-dist/dist/js/fuelux.js — Interactive Llama, Oct 05 '14 at 16:02
Thanks @InteractiveLlama. I was having the same problem. My options object was undefined. I replaced the 3.0.2 version with the link in your comment and everything works. — Greg Svitak, Oct 07 '14 at 08:43

FuelUX Tree dataSource options undefined

1 Answers1