0

The documentation at http://getfuelux.com/javascript.html#tree doesn't give good example about how to use Javascript Datasource. I have read a lot of other questions on StackOverflow about it, but most of them are old (still use name instead of text). Can anyone help me with the dataSource and callback usage?

Here is my current code:

HTML:

<div class="row fuelux">
    <div class="col-sm-12">
        <div id="grp-tree-hobby">
            <ul id="tree-hobbies" class="tree">
            </ul>

        </div>
    </div>

</div>

Javascript:

<script>
    $("#tree-hobbies").tree({
        dataSource: function (parentData, callback) {
            console.log(parentData);
            callback({
                "data": [
                     { "text": "No hobby has been added yet", "type": 'item' },
                     { "text": "No hobby has been added yet", "type": 'item' },
                ],
            });
        },

    });

</script>

None exception is printed in the console, but the ul is still blank, and if I change ul into div, the result was still the same.

Can you please give me an example?

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Luke Vo
  • 17,859
  • 21
  • 105
  • 181

2 Answers2

1

This is the code for the example on the actual docs page.

Where's the rest of your markup for the templating?

Interactive Llama
  • 780
  • 4
  • 10
0

I have same problem. But I mean your html code is wrong. U must use this one: 

        <ul class="tree tree-folder-select" role="tree" id="dirTree">
          <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
            <div class="tree-branch-header">
              <button class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span></button>
              <button class="tree-branch-name">
                <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>

next I used this jquery definition:

$('#dirTree').tree({
    dataSource: function(options, callback){
        setTimeout(function () {
            callback({ data: [
                { name: 'Ascending and Descending', type: 'folder', dataAttributes: { id: 'F1' } },
                { name: 'Drawing Hands', type: 'folder', dataAttributes: { id: 'F2' } },
                { name: 'Belvedere', type: 'folder', dataAttributes: { id: 'F3' } },
                { name: 'House of Stairs', type: 'folder', dataAttributes: { id: 'F4' } },
                { name: 'Belvedere', type: 'folder', dataAttributes: { id: 'F5' } }
            ]});
        }, 400);},
    cacheItems: false,
    folderSelect: true,
    multiSelect: false
});

but not working :(

Ducho
  • 11
  • 1