Layout inside a Table Component in vaadin

General
1

Hi all,

I need to add layout inside a table component,

I created a table with two columns,

       Table table = new Table();
       
       table.addContainerProperty("Id", Integer.class, null);
   table.addContainerProperty("Name", String.class, null);  
        
        for( int i = 0; i < 50; i++) {
               table.addItem(new Object[] {i, "xyz"}, Integer.valueOf(i));
        }
                       
        table.setSelectable(true);
        table.setSizeFull();

When i am clicking on record, say row num 2,

Then i need layout which containing TextField’s in between the row 2 and 3.

Previously i was using child window and added to the application window, acts as the overlay to the whole page.

but my requirement is the exactly between the two rows in table.

Can any one help, how to do this in Vaadin.

Thanks in advance for your kind reply.

regards,
Aravind.

2

I would try to do it with a TreeTable component. Create a Container.Hierarchical with a child itemId for each of your root level row itemId. Then use ColumnGenerator for all the leaf itemIds to generate the TextField components.

3

I am sorry, am not getting it clearly. Can you just elaborate it.

4

Well I’m not quite sure what you are trying to achieve. But howabout something like this. And sorry about the delayed answer. Your reply somehow went past me.

    @Override
    public void init(VaadinRequest request) {

        TreeTable table = new TreeTable();
        table.addContainerProperty("Id", Integer.class, null);
        table.addContainerProperty("Name", String.class, null);

        for (int i = 0; i < 100; i += 2) {
            Object[] data = new Object[]
 { i, "xyz" };
            Object parentId = table.addItem(data, i);
            Object childId = table.addItem(data, i + 1);
            table.setChildrenAllowed(childId, false);
            table.setParent(childId, parentId);
        }

        table.setTableFieldFactory(new TableFieldFactory() {

            @Override
            public Field<?> createField(Container container, Object itemId,
                    Object propertyId, Component uiContext) {
                if (((Integer) itemId) % 2 == 1) {
                    return new TextField();
                }
                return null;
            }
        });
        table.setEditable(true);
        table.setSelectable(true);
        table.setSizeFull();

        setContent(table);
    }
5

Thanks for your reply.

my Exact requirement is,

Like the (Grid)Expand and collapse panel in GWT.

I need to do it with vaadin 6.

When selecting the row from table, then the row should expand to show the further details, or it should hide the details.

regards,
Aravind