How to display nested data elements in FuelUX tree bootstrap plugin

Question

I am trying to implement the FuelUX tree plugin and I have been following the example so far, but I need a nested structure. I assume the tree plugin is able to handle nested children? it is right?

var treeDataSource = new TreeDataSource({ 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 }); 

So far, it seems, top-level items are being loaded into open folders, not nested data items. This is what the demo does on its site, but it doesn’t look like its desired interaction. Can anyone confirm if this is the expected behavior?

Can someone tell me the code where they created the nested data tree using this plugin? Is there something really obvious that I'm missing?

Answer 1

In fact, I am writing a blog post on this very topic.

The solution I developed is not for the faint of heart. The problem is that folder objects do not support instantiation with child data. In addition, adding children is not a trivial task. I deployed a quick fiddle that you can choose to get an idea of ​​how to achieve your goal. I use the same solution only so that my addChildren function addChildren to the MVC route via AJAX and returns a JSON object to dynamically populate the children.

You can literally copy and paste the code from fiddle and start using the addChildren box function.

Answer 2

I apologize for the lack of documentation on this subject - it needs to be clarified exactly.

The idea is that you create a dataSource when creating a tree management instance, and this data source should have a data function with a signature (parameters, callback). This data function will be called in the init control to populate the root level data and will be called again at any time when the folder is clicked.

The task of the data function is to look at the parameter parameter, which is populated from jQuery.data() in the clicked folder and respond with data for this folder. A special case is the source data of the root folder, where the parameters are populated from any jQuery.data () in the root control, which may or may not exist.

jQuery.data () in folders is populated from an array of objects that you provide in the data function callback. You can see in this example the https://github.com/ExactTarget/fuelux/blob/master/index.html#L184-L189 property of additionalParameters , but in fact you can provide any additional properties outside the required name and type to use later (the next time you call the data function) to determine which folder was clicked and return data for that folder.

Our current example returns the same static data for each folder, which is not the best example, so I hope to improve this situation either by creating a tutorial on my own or by contacting it if someone hits me.

Answer 3

In response to Adam's answer, here is an example that seems to do what you want.

The data function for the DataSource can check if there is any "auxiliary" data passed through the parameters:

 DataSource.prototype = { columns: function () { return this._columns; }, data: function (options, callback) { var self = this; if (options.search) { callback({ data: self._data, start: start, end: end, count: count, pages: pages, page: page }); } else if (options.data) { callback({ data: options.data, start: 0, end: 0, count: 0, pages: 0, page: 0 }); } else { callback({ data: self._data, start: 0, end: 0, count: 0, pages: 0, page: 0 }); } } }; 

Bootply demo: http://www.bootply.com/60761