Tree Grid or Tree Table with multi headers

Vaadin 6 / 7 / 8
1

Hi Guys,

I’m making a tree table, but I have to fix the first three rows of the table for the scroll start in the fourth row.

I tried to find out a way to create 3 headers in tree table, but vaadin tree table dont have support to multi headers.

I found in vaadin grid in this example http://demo.vaadin.com/book-examples-vaadin7/book#component.grid.features, but vaadin grid dont have a way to make tree grid like vaadin table.

Someone have a solution to me?

Thanks,

Rodrigo

2

Maybe it’ll work if you create 2 tables, one with those 3 rows and one with the rest and synch the column resizing, if any, using an extension. You definettly need the resizing on the client side, otherwise the synch will be too slow if happen the server side.

I’m not sure an extension would work for 2 components, but you can have your own custom component which wrapps the 2 tables and then create the extension for that wrapper component, or maybe create a custom connector which synch the tables resize.
Af far as I looked you might need your own subclass for TreeTable and it’s widget. I see there is this method in VScrollTable:

protected void setColWidth(int colIndex, int w, boolean isDefinedWidth) , which you may use to synch the 2 tables on resize.

Something like this, but don’t take it for granted, I’m not testing it against the compiler or any other technical issues that might rise. Only use this as an idea and work your own version. The best way to do this is to first see exactly what we want, whether we should limit to 2 tables or use multiple, etc… I marked with TODO inside the 2 really important methods where we need to control how resize will be set.

class ResizeSynchTreeTable extends TreeTable {

}

@Connect(ResizeSynchTreeTable.class)
class ResizeSynchTreeTableConnector extends TreeTableConnector {

    @Override
    public VResizeSynchTreeTable getWidget() {
        return (VResizeSynchTreeTable) super.getWidget();
    }
}

class VResizeSynchTreeTable extends VTreeTable {

    List<VResizeSynchTreeTable> tablesToSynch;
    // OR
    VResizeSynchTreeTable otherTable;

    // otherTable setter.

    @Override
    protected void setColWidth(int colIndex, int w, boolean isDefinedWidth) {

        // TODO: Do something smart here to send the message to the other tables but also
        // notice that if you don't block the calls, you'll get an infinite loop, at least
        // using the list pattern.
        // If you only have a reference in the header table to the second table, then it's fine.
        // This might be enough.
        otherTable.setColWidth(colIndex, w, isDefinedWidth);

        super.setColWidth(colIndex, w, isDefinedWidth);
    }
}

class MultiHeaderTable extends CustomComponent {

    ResizeSynchTreeTable headerTable;

    ResizeSynchTreeTable bodyTable;

    // ...
}

@Connect(MultiHeaderTable.class)
public class MultiHeaderTableConnector extends CustomComponentConnector {

    @Override
    public void onConnectorHierarchyChange(ConnectorHierarchyChangeEvent event) {
        // TODO: Identify the widgets and set them to each other.
        firstTable.setOtherTable(secondTable);
    }
}
3

Thanks Bogdan!

But I was looking for a component or addon to make this in one table. I think now your idea is the only way.

4

Hi,

I don’t know of such component. Looking quickly in
directory
 search for UI table components I can’t see any.

Would be really nice if you build and publish it as an addon.

5

Yes, it will be nice! I will try Bodgan!

Tnx.