Creating two level tree grid from flat list

[mjamesb]

I am trying to create a tree grid that results in a tree that looks like this.
group1 total-logins
---user1 logins
---user2 logins
group2 total - logins
---user3 logins
---user4 logins

I have a treegrid pointed to a datasource set up which retrieves a flat list of xml

isc.TreeGrid.create({
  ID: "GroupTreeGrid",
  autoFetchData: false, 
  dataSource: "userDS",
  loadDataOnDemand: false,
  openerImage: null,
  nodeIcon: "../images/u.png",  
  folderIcon: "../images/gp_16.png",
 fields: [...]
})

isc.DataSource.create({
  ID: "usersDS",
  dataURL: "..."
  recordXPath: "//row",
  transformResponse: function(dsResponse, dsRequest, data) {	     
		return buildGroupData(dsResponse, dsRequest, data, null);
  },
  fields: [   
    { title: "Name", name: "name"},    
    { title: "Logins", name: "logins"},
    ],
});

My XML
<dataSet>
	<row>
		<groupId>1</groupId>
		<userId>1111111</userId>
		<logins>5</logins>	<name>John</name>

	</row>
        <row>
		<groupId>1</groupId>
		<userId>1222222</userId>
		<logins>3</logins>	<name>Joe</name>
	</row>
        <row>
		<groupId>2</groupId>
		<userId>13333</userId>
		<logins>5</logins>	<name>Jake</name>
	</row>
        <row>
		<groupId>2</groupId>
		<userId>1444444</userId>
		<logins>3</logins>	<name>Tom</name>
	</row>...etc

So what I tried to do was use transformresponse to create a new data array so I can create the group rows with totals. The array members are group rows with a children array of user rows. Then I pass back the new array as the dsresponse.data. However the tree grid does not interpret the parent child relationship..it just puts each node as a child of the previous node regardless of if it is part of the .children or not.

Could you point me in the right direction please.

[Isomorphic]

Hi mjamesb,

Take a look at the Tree Databinding overview in the SmartClient Reference.

You have a number of options - you could make your XML hierarchical, or you could add id/parentId properties that allow the flat list of nodes to be linked into a tree.

Your method of creating children Arrays in transformResponse will also work, but only if you tell the ResultTree what property your array of children appears under, by passing a childrenProperty ia treeGrid.dataProperties.

[mjamesb]

Thanks...an easy follow up

I got it working...all I needed was to add the id and parentId. My group rows which were created inside my transformresponse function just needs an id=groupId and then the user rows which were added the children array just needed a parentId = groupid.

Follow up question....I expand the tree after populating it....how can I prevent the user from being able to collapse any of the group nodes?

[Isomorphic]

Probably the simplest thing is to override toggleFolder() so that it simply does nothing after the tree is in the state you want it.

[ggedal]

I have a ListGrid with groups. How can I stop user from collapsing groups? I cannot find a method to "override toggleFolder()" or any other method to stop collapse of the group in ListGrid.
I tried to cancel a click event and then using grid.getGroupTree().openAll() in the grid.addCellClickHandler() event to open all nodes on users click, but if I add this event the node still close and don't open again.

grid.addCellClickHandler( new CellClickHandler() {
    public void onCellClick( CellClickEvent event )  {
        final ListGridRecord record = event.getRecord();
        // Group headers will have only a single cell value              
                if( record.getSingleCellValue() != null ){	
	              	event.cancel();
                        grid.getGroupTree().openAll();
	              }
	            }
	        } );

I am using SmartGWT 2.2 and Firefox 6.3.12 on Windows XP SP3.

[Isomorphic]

If you're trying to show a fixed tree without the ability to collapse it, you probably want to base it on the TreeGrid (as with the user above) where you can also set showOpenIcons to false to prevent showing controls to open/close folders.

[ggedal]

Thanks for a quick response. Are there any options to do this with existing editable ListGrid ? I am afraid switching to editable TreeGrid will require lots of code modifications.
The main issue is that by my requirements I need to populate value in row #20 when user input data in row #2. So if group with row#20 is closed, the row does not exist in the Grid and I am unable to update it.