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
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.