This support forum belongs to the AlloyUI State Interaction Gallery Module.
AlloyUI State Interaction has a bug tracker here: http://issues.liferay.com/browse/AUI
| Page 1 of 1 | [ 9 posts ] |
|
Hi,
I hope someone can help me to solve this problem. I'm currently use Alloy UI TreeviewDD on my apps, Now I'm having problem loading the tree content. I saw the demo that provided on alloy ui package, but I don't get a solution till now. My question is how we change JSON format before it listed on treeview? Below is my apps JSON response: Code: {"Folders":[{"BucketName":"Bucket1","CreationDate":"Sun, 30 Jun 2010 17:17:40 GMT"},{"BucketName":"Bucket2","CreationDate":"Sun, 30 Jun 2010 17:33:16 GMT"},{"BucketName":"Bucket3","CreationDate":"Thu, 22 Jun 2010 17:15:27 GMT"},{"BucketName":"Bucket4","CreationDate":"Thu, 22 Jun 2010 17:15:25 GMT"},{"BucketName":"Bucket5","CreationDate":"Sun, 10 Jun 2010 04:27:33 GMT"},{"BucketName":"Bucket6","CreationDate":"Sat, 27 Jul 2010 14:01:25 GMT"},{"BucketName":"Bucket7","CreationDate":"Sat, 27 Jul 2010 14:01:28 GMT"}],"success":"true"} As we can see, the JSON element is different to Tree children configuration on the demo apps. Code: [{ label: 'Folder 1', children: [ { label: 'file' }, { label: 'file' }, { label: 'file' } ] }, { label: 'Folder 2', expanded: true, children: [ { label: 'file' }, { label: 'file' } ] }, { label: 'Folder 3', children: [ { label: 'file' } ] }, { label: 'Folder 4', expanded: true, children: [ { label: 'Folder 4-1', expanded: true, children: [ { label: 'file' } ] } ] } ] Notice that I can't change the JSON format, because it's also needed on different project by different work team. Perhaps there's a way on the alloy iu side that i can use? Thank you! |
Eduardo LundgrenYUI Contributor
|
You can use the formatter option passed into the io option. For instance:
On the TreeView constructor you can pass the "io" option and inside it pass the formatter: io: { url: 'url.php', formatter: function(json) { var output = []; A.each( json, function(node) { return { label: node.label, ... }; } ); } } |
|
Thanks for the reply. I tried your suggestion, but the tree node didn't listed. I enclose the codes below.
Code: AUI().ready('aui-tree-view', 'aui-tooltip', 'datatype-xml', 'dataschema-xml', function (A) { var children = [{ label: 'Root', id: 'root', expanded: true, draggable: false }]; var treeFolder = new A.TreeViewDD({ io: { cache: false, url: BaseURL + '?cmd=listFolders', formatter: function (json) { var output = []; A.each(json, function (node) { output.push({ label: node.Folders.BucketName }); }); return output; } }, type: 'file', width: 300, height: 400, boundingBox: '#treeDiv1', children: children }).render(); }); What i have missing on this module? Also i have tried to trace the http request, but i didn't found any request to IO URL address. Please let me know if there are any mistakes. Thanks! |
Eduardo LundgrenYUI Contributor
|
Hey, you have to specify the type of the root node to be "io" and there was a minor fix on your JSON, note that I'm looping json.Folders instead of json.
UI().ready('aui-tree-view', 'aui-tooltip', 'datatype-xml', 'dataschema-xml', function (A) { var children = [{ label: 'Root', id: 'root', expanded: true, draggable: false, type: 'io' }]; var treeFolder = new A.TreeViewDD({ io: { cache: false, url: 'a.html', formatter: function (json) { var output = []; A.each(json.Folders, function (node) { output.push({ label: node.BucketName }); }); return output; } }, type: 'file', width: 300, height: 400, boundingBox: '#treeDiv1', children: children }).render(); }); |
|
It's work great! Now I can continue with another module. Thanks for help
|
|
Hi Eduardo,
May I ask one more help? I want to create a data table, what plugin I should use? can you give me an example how to do it or any link directions? I already have a datatable, but it's based on YUI and I want change it to AUI base. Currently I'm creating file explorer just like windows explorer, but I'm stuck in creating datatable ! Thanks again! |
|
anyone please? I need to figure this out soon.
Thanks for help! |
Eduardo LundgrenYUI Contributor
|
Hey Julian, what you mean by data table? Is it like a Grid Display plugin?
|
|
Yes, I mean a plugin like data grid. I need to display files list on the right side using data grid and folder tree on the left side just like win explorer. So when we click on a folder, the files will be displayed on the data grid. I already have YUI data grid, but if there is AUI plugin that i can use, I want to use it instead YUI datatable.
Also i tried to give an event when tree node expanded, but it's not working. Is there expand event on AUI tree node. What i want is make a file request to server when a tree node expanded. Thanks |
| Page 1 of 1 | [ 9 posts ] |
| You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum |
© YUI Library - Site Credits
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group