Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Gurumurthy Godlaveeti
How to create the Alloy UI Treeview dynamically
December 17, 2012 10:21 PM
Answer

Gurumurthy Godlaveeti

Rank: Regular Member

Posts: 209

Join Date: August 11, 2011

Recent Posts

Hello All ,

I want to show the tree view in my application . So as per the application , the following is the code which provided by Alloy UI Javascript code .
 1
 2var tree1 = new A.TreeViewDD(
 3            {
 4                boundingBox: '#tree1',
 5                children: children,
 6                height: 280,
 7                io: {
 8                    cache: false,
 9                    url: 'http://liferay.com/alloy-demos/tree-view/content.html',
10                },
11                type: '', /* type: 'file', */
12                width: 300
13            }
14        )
15        .render();


So here one of the parameter is "Children" but this Children is having the hard coded values in the example as like below .

 1
 2var children = [
 3            {
 4                children: [
 5                    {
 6                        checked: true,
 7                        checkName: 'customSelectName',
 8                        io: '/c/document_library/get_file?uuid=1737d9e2-e7c4-4f46-a77c-4aa8937c2d8e&groupId=14',
 9                        label: 'TaskNodeRoot',
10                        leaf: false,
11                        type: 'task'
12                    },
13                    {
14                        alwaysShowHitArea: false,
15                        checkName: 'customSelectName',
16                        label: 'CheckboxNode',
17                        leaf: false,
18                        type: 'check'
19                    },
20                    {
21                        cache: true,
22                        io: 'http://liferay.com/alloy-demos/tree-view/content.html',
23                        label: 'CachedTreeNodeIO',
24                        type: 'io'
25                    },
26                    {
27                        children: [
28                            {
29                                label: 'Folder1-1',
30                                id: 'folder1-1',
31                                leaf: false,
32                                expanded: false,
33                                children: [
34                                    fileRoot1,
35                                    {
36                                        label: 'File1'
37                                    },
38                                    {
39                                        label: 'File2'
40                                    },
41                                    {
42                                        label: 'From JSON',
43                                        id: 'fromJSON'
44                                    }
45                                ]
46                            },
47                            {
48                                label: 'File1 - with id',
49                                id: 'file1'
50                            },
51                            {
52                                label: 'File2'
53                            },
54                            {
55                                label: 'File3'
56                            }
57                        ],
58                        expanded: true,
59                        id: 'folder1',
60                        label: 'Folder1',
61                    },
62                ],
63                draggable: false,
64                expanded: true,
65                id: 'root1',
66                label: 'ROOT'
67            }
68        ];


How to create the Children dynamically ? If any body have example about it then please share it .
anas esseidi
RE: How to create the Alloy UI Treeview dynamically
April 28, 2016 10:00 AM
Answer

anas esseidi

Rank: New Member

Posts: 3

Join Date: August 6, 2015

Recent Posts

Hello,
that script will inspire you do something useful for your case.

 1
 2<%
 3    long userId = UserServiceUtil.getCurrentUser().getUserId();
 4     List<Repository> repositories = RepositoryLocalServiceUtil.getRepositoriesByUserId(userId);
 5%>
 6
 7 
 8 <%  for(int i=0; i<repositories.size(); i++){
 9 %>
10        <aui:script>
11            YUI().use(
12                  'aui-tree-view',
13                  function(Y) {
14                    new Y.TreeViewDD(
15                      {
16                        boundingBox: '#myTreeView',
17                        children: [
18                          {
19                            children: [
20                        <%
21        List<ActivityEntry> Activities = ActivityEntryLocalServiceUtil.getActivitiesByRepositoryId(repositories.get(i).getRepositoryId());
22                        for(int j=0; j< Activities.size(); j++){ %>
23                        
24                            {label: '<%= Activities.get(j).getActivityEntryName() %>', leaf: true,  type: ''},
25                           
26                           
27                        <% } %>
28                            ],
29                            expanded: true,
30                            label: '<%= repositories.get(i).getRepositoryName() %>'
31                          }
32                        ]
33                      }
34                    ).render();
35                  }
36                );
37            </aui:script>
38            
39            <%            
40                     }
41             %>
42
43<div id="myTreeView"></div>
Pankaj Kumar
RE: How to create the Alloy UI Treeview dynamically
April 28, 2016 10:34 AM
Answer

Pankaj Kumar

Rank: Junior Member

Posts: 39

Join Date: July 27, 2014

Recent Posts

Please look into this

http://liferayplanet.blogspot.com/2015/03/liferay-aui-treeview.html