Grid as a tree: any idea when?

Vaadin 6 / 7 / 8
1

Hi Vaadineers,

we’re eagerly looking forward to Vaadin 7.4 and its new Grid component. That will open up new opportunities for us and will solve some long-standing issues we’ve had with the existing Table component.

It seems that RC1 is drawing near, so I was wondering whether you guys@Vaadin are already prepared to shed some early light on
your plans to also add tree-like functionality to Grid
? This used to be announced as Vaadin 7.5, but that’s no longer the case on the https://vaadin.com/roadmap .

Cheers
Andreas

2

Twitter tells that it is still in the TODO list

https://twitter.com/joonaslehtinen/status/556714080363237376/photo/1

3

Indeed. That list is actually bigger than I thought it would be, e.g. I thought that column resize and reorder event handler existed already.

Let’s see: maybe there will be an announcement at tomorrow’s
GWT.create
 conf in the US or next week at its European counterpart in Munich.

4

Any update on this?
Will we ever see a TreeGrid or some other form of support for hierarchical containers bound to a Grid?
Maybe it can be done in time for 7.6? If not, what’s the ETA?

Those using a mixture of Tree and TreeTable in their projects won’t really be able to switch to Grid until TreeTable is effectively replaced. We use them both trasparently within our base classes so there’s really no way for us to use Grid at all unless we use a mixture of Grid and TreeTable, and that means that some tables would end up with different features and look from other tables… (not acceptable, of course)

5

So,
Vaadin 7.6 now focuses on the developer experience
. Anyone knows of this includes bringing a Tree to the Grid? :slight_smile:

6

I am also eager to get a component better than the TreeTable. We are having lots of performance issues and jumping with TreeTable. (BTW I am displaying a construction project WBS in a treetable with calculations… )

I am thinking of using the Grid as is for the display, and to emulate the tree I will put an icon that changes when open closed, and I will change my data dictionary putting the right elements in the list… Do you vaadineers think it’s a good idea? did someone try it? do you see problems already doing so?.. Would the refresh after opening a node be very long?

Thanks.

7

I have developed an addon EverproTreeGrid that wrapes the normal great component ‘Grid’ and allows to send a Hierarchical Data source.

Here’s the link to the addon:

https://vaadin.com/directory#!addon/everprotreegrid

8

I have developed an addon EverproTreeGrid that wrapes the normal great component ‘Grid’ and allows to send a Hierarchical Data source.

Here’s the link to the addon:

https://vaadin.com/directory#!addon/everprotreegrid

9

Ah, I didn’t notice your add-on, so I did a very rough and hacky implementation with similar ideas. The
example code is here
. Your code is probably better for the purpose, as my implemention is not very finished. In any case, I hope there’s some use for that. For example, you seem to use image for the node icon, but I’m using a FontIcon for that, as is done in Tree.

Note that you shouldn’t use style names beginning with “v-” to your components, as they are reserved for Vaadin components.

10

I’ve also try to implement it. Try it out if you are interested https://vaadin.com/directory#!addon/gridtree

11

Any news on this? The two addons I could find don’t support filtering. (https://vaadin.com/directory#!addon/everprotreegrid and https://vaadin.com/directory#!addon/gridtree).
I don’t know how difficult it would be to take one of those as base and implement Container.Filterable myself…

12

Hi, I am the developer of https://vaadin.com/directory#!addon/everprotreegrid. I have just uploaded a new version that supports the Container.Filterable. Please try it and don’t hesitate to let me know if you face any problems or need help.

13

Wow, that was fast!
Thanks for your help Antoine, I’ll try it :slight_smile:

14

Hi, I am testing the addon but I don’t know how to add items to the container. addItem is not supported
Thanks for the help

15

Adding items to the container depends on your implemetation of the Container no? It does not realy depend on the Grid component unless I didn’t quite understand your question. But anyway what is the class you are using as DataSrource? Do you want to post your code or somothing?

16

Sorry, I wasn’t understanding the concept. In truth I don’t know if I understand it completely. To set a TreeGrid, is it necessary to add the properties to both the container and the grid? Ex:

[code]
EverproTreeGrid treeGrid = new EverproTreeGrid(“passportNum”, “passportNum”);
HierarchicalContainer container = new HierarchicalContainer();

container.addContainerProperty(“passportNum”, String.class, “”);
container.addContainerProperty(“name”, String.class, “”);
container.addContainerProperty(“surname”, String.class, “”);

treeGrid.addColumn(“name”, String.class);
treeGrid.addColumn(“surname”, String.class);

// Fill container
{
…
}

treeGrid.setContainerDataSource((Container.Hierarchical) container); // It clashes with Grid’s method if no casting
[/code]I haven’t found a way to do it without defining the properties twice, is it possible?

Also I found a small error to your instructions on the addon page. The mixin to import to the stylesheet is called “addons”, so it should be:
@include addons;
instead of
@include everprotreegridaddons;
 :slight_smile:

I haven’t tested yet the filtering functionality, it’s the next thing I’ll do. Thanks!

17

The filtering functionality works perfectly.

What I am having trouble with now is the button renderer.
I have seen that there is a EverProTreeButtonRenderer, but I don’t know how to use it.
As far as I know, to be able to add a generated property you need to wrap the container with a GeneratedPropertyContainer. But this kind of container is not Hierarchical. Could you give me a short example of how to use the EverProTreeButtonRenderer?

18

Ok, these are my latest findings:
I don’t have to use EverProTreeButtonRenderer, I can use a normal one doing something like this:

[code]
ButtonRenderer buttonRenderer = new ButtonRenderer(listener);
treeGrid.getColum(“edit”).setRenderer(buttonRenderer, new Converter<String, String>(){

public String convertToModel(String value, Class<? extends String> targetType, Locale locale) throws com.vaadin.data.util.converter.Converter.ConversionException {
return “Not Implemented”;
}

public String convertToPresentation(String value, Class<? extends String> targetType, Locale locale) throws com.vaadin.data.util.converter.Converter.ConversionException {

return “Edit”;
}

public Class getModelType() {
return String.class;
}

public Class getPresentationType() {
return String.class;
}
});
[/code]To solve my problem with others components, I am using ComponentRenderer addon. For this I have had to wrap the class GeneratedPropertyContainer in order to implement Hierarchical. I havençt tested a lot, but I think that something like this should just be fine:

 public class HierarchicalGeneratedPropertyContainer extends GeneratedPropertyContainer implements Container.Hierarchical
{
/**
* Constructor for GeneratedPropertyContainer.
*
* @param container underlying indexed container
*/
public HierarchicalGeneratedPropertyContainer (Indexed container)
{
super(container);
}

@Override
public Collection<?> getChildren (Object itemId)
{
return ((Container.Hierarchical) getWrappedContainer()).getChildren(itemId);
}

@Override
public Object getParent (Object itemId)
{
return ((Container.Hierarchical) getWrappedContainer()).getParent(itemId);
}

@Override
public Collection<?> rootItemIds ()
{
return ((Container.Hierarchical) getWrappedContainer()).rootItemIds();
}

// Same with all other methods that need implementation for Hierarchical
}

I am still setting the properties twice though, properties for the hierarchical container and colums for the tree grid.

19


A- Redering of the expand collaps column and icons.
 You obviously get a default one being the blue arrows, but you can change these icons or even add other icons that desccribe the type of node you are on…

a- if you just want to change the icons them you can simply overwrite the style in the scss:
.v-foc-gridtree-node-expanded
.v-foc-gridtree-node-collapsed
.v-foc-gridtree-node-leaf

NB: In a future version I should remove the v- as this is reserved to native vaadin components

b- If you want to have a rederer by node type, then you need to set your NodeStyleGenerator that allows you to get your node object and decide on the style you want to apply. In the following example I do so for an object of my own where Bkdn can represent a material, service or role…

            getTreeGrid().setNodeStyleGenerator(new IEverproTreeGridNodeStyleGenerator(){
                public String getStyleName(Object itemId, String defaultStyleName) {
                    String style = defaultStyleName;
                    MyItem item = getTreeGrid().getDataSource().getItem(itemId);
                    if(item != null){
                        //Depending on the type of the node we add a string to the style
                        //which would become something like:
                        //foc-gridtree-node-expanded-material,...
                        if(item.isMaterial()){
                            style += "-material";
                        }else if(item.isService()){
                            style += "-service";
                        }else if(item.isRole()){
                            style += "-role";
                        }
                    }
                    return style;
                }
            });

In my case these are the styles that I used

  .v-foc-gridtree-node-expanded-material {
    border: 0px;
    
    background-image: url("icons/16x16/tree-node-expanded.png"), url("icons/16x16/material.png");
    background-position: 0px 0px, 16px 0px;
    background-repeat:  no-repeat;
    background-color: transparent;

    height: 20px;
    padding-left: 40px;
  }

  .v-foc-gridtree-node-collapsed-material  {
    border: 0px;
    
    background-image: url("icons/16x16/tree-node-collapsed.png"), url("icons/16x16/material.png");
    background-position: 0px 0px, 16px 0px;
    background-repeat:  no-repeat;
    background-color: transparent;
    height: 20px;
    padding-left: 40px;
  }
  
  .v-foc-gridtree-node-leaf-material  {
    border: 0px;
    
    background-image: url("icons/tree-node-leaf.png"), url("icons/16x16/material.png");
    background-position: 0px 0px, 16px 0px;
    background-repeat:  no-repeat;
    background-color: transparent;
    height: 20px;
    padding-left: 25px;
  
  }


  .v-foc-gridtree-node-expanded-service {
    border: 0px;
    
    background-image: url("icons/16x16/tree-node-expanded.png"), url("icons/16x16/service.png");
    background-position: 0px 0px, 16px 0px;
    background-repeat:  no-repeat;
    background-color: transparent;

    height: 20px;
    padding-left: 40px;
  }

  .v-foc-gridtree-node-collapsed-service {
    border: 0px;
    
    background-image: url("icons/16x16/tree-node-collapsed.png"), url("icons/16x16/service.png");
    background-position: 0px 0px, 16px 0px;
    background-repeat:  no-repeat;
    background-color: transparent;
    height: 20px;
    padding-left: 40px;
  }
  
  .v-foc-gridtree-node-leaf-service {
    border: 0px;
    
    background-image: url("icons/tree-node-leaf.png"), url("icons/16x16/service.png");
    background-position: 0px 0px, 16px 0px;
    background-repeat:  no-repeat;
    background-color: transparent;
    height: 20px;
    padding-left: 25px;
  
  }

  .v-foc-gridtree-node-expanded-role {
    border: 0px;
    
    background-image: url("icons/16x16/tree-node-expanded.png"), url("icons/16x16/resourcerole.png");
    background-position: 0px 0px, 16px 0px;
    background-repeat:  no-repeat;
    background-color: transparent;

    height: 20px;
    padding-left: 40px;
  }

  .v-foc-gridtree-node-collapsed-role {
    border: 0px;
    
    background-image: url("icons/16x16/tree-node-collapsed.png"), url("icons/16x16/resourcerole.png");
    background-position: 0px 0px, 16px 0px;
    background-repeat:  no-repeat;
    background-color: transparent;
    height: 20px;
    padding-left: 40px;
  }
  
  .v-foc-gridtree-node-leaf-role {
    border: 0px;
    
    background-image: url("icons/tree-node-leaf.png"), url("icons/16x16/resourcerole.png");
    background-position: 0px 0px, 16px 0px;
    background-repeat:  no-repeat;
    background-color: transparent;
    height: 20px;
    padding-left: 25px;
  
  }


B- Setting the properties twice:

I don’t see the harm in that. Actually in my case it is very rare that one would need to display in the table, or tree all the properties that exist in the datasource, becase the data source would reflec the database content which prctically ends up not matching exactly what I want to show to the user…


C- Sharing the example:
 I don’t have an example in my plugin because when I built it I used it in my particular case of DataSource implementation… so if you are doing a simple example I would be grateful if you cn share it on the post, I will include it then in the AddOn :slight_smile:

20

Hi, thank you for the clarification on the styles, some of it can be helpful, but what I meant is that the instructions in the addon page are a little wrong :stuck_out_tongue:

As example for the page addon you could use what I posted in this same thread: https://vaadin.com/forum#!/thread/9075352/14496241

I’m going to use the addon extensively, thanks. I have been able to make it work with filtering and components in cells, wich is what I needed :slight_smile: