YUILibrary - Open source JavaScript and CSS for building richly interactive software.
Fork YUI on GitHub
  [ 9 posts ]

Julian Tanjung

  • Username: jtanjung
  • Joined: Sat Jul 31, 2010 6:23 pm
  • Posts: 10
  • Offline
  • Profile

TreeviewDD IO Formatter

Post Posted: Sat Jul 31, 2010 7:18 pm
+0-
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 Lundgren

YUI Contributor

  • Offline
  • Profile

Re: TreeviewDD IO Formatter

Post Posted: Sat Jul 31, 2010 9:47 pm
+0-
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,
...
};
}
);
}
}

Julian Tanjung

  • Username: jtanjung
  • Joined: Sat Jul 31, 2010 6:23 pm
  • Posts: 10
  • Offline
  • Profile

Re: TreeviewDD IO Formatter

Post Posted: Sun Aug 01, 2010 2:56 am
+0-
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 Lundgren

YUI Contributor

  • Offline
  • Profile

Re: TreeviewDD IO Formatter

Post Posted: Sun Aug 01, 2010 7:17 am
+2-
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();

});

Julian Tanjung

  • Username: jtanjung
  • Joined: Sat Jul 31, 2010 6:23 pm
  • Posts: 10
  • Offline
  • Profile
Tags:

Re: TreeviewDD IO Formatter

Post Posted: Sun Aug 01, 2010 8:27 am
+0-
It's work great! Now I can continue with another module. Thanks for help :)

Julian Tanjung

  • Username: jtanjung
  • Joined: Sat Jul 31, 2010 6:23 pm
  • Posts: 10
  • Offline
  • Profile

Re: TreeviewDD IO Formatter

Post Posted: Wed Aug 04, 2010 2:30 am
+0-
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!

Julian Tanjung

  • Username: jtanjung
  • Joined: Sat Jul 31, 2010 6:23 pm
  • Posts: 10
  • Offline
  • Profile

Re: TreeviewDD IO Formatter

Post Posted: Wed Aug 04, 2010 7:31 pm
+0-
anyone please? I need to figure this out soon.

Thanks for help!

Eduardo Lundgren

YUI Contributor

  • Offline
  • Profile

Re: TreeviewDD IO Formatter

Post Posted: Thu Aug 05, 2010 12:12 pm
+0-
Hey Julian, what you mean by data table? Is it like a Grid Display plugin?

Julian Tanjung

  • Username: jtanjung
  • Joined: Sat Jul 31, 2010 6:23 pm
  • Posts: 10
  • Offline
  • Profile

Re: TreeviewDD IO Formatter

Post Posted: Fri Aug 06, 2010 5:26 am
+0-
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
  [ 9 posts ]
Display posts from previous:  Sort by  
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