Nested Grid in GWT

Question

I need to develop a control which is similar to the Nested Grid in the Smart GWT.

User will be having a column for expansion images, when user clicking on the image in a particular row, a sub grid has to be opened there itself. Here all remaining rows needs to move down.

How can i achieve that functionality? Can anybody give me some clues so that i can proceed.

I have already a grid which is a celltable with custom header(with search functionality implemented).

Thanks, Saritha.

sorting is not required but pagination is required. May be i can go for scroll down event to fetch the new records. Anyhow pagination stuff is secondary to me. — Saritha, Sep 17 '12 at 05:01

score 1 · Answer 1 · answered Sep 17 '12 at 14:52

Create your nested widget (myNestedWidget) that you want to show. It should have a CSS style "position: absolute", unless your grid is added to the LayoutPanel (or similar), in which case you can position your widget directly. Let's call the parent widget of your grid gridParentWidget.

In your CellTable add the following handler:

myTable.addCellPreviewHandler(new Handler<myObject>() {
    @Override
    public void onCellPreview(CellPreviewEvent<myObject> event) {
        if ("click".equals(event.getNativeEvent().getType())) {
            if (event.getColumn() == 0) {
                int top = myTable.getRowElement(event.getIndex()).getAbsoluteBottom();
                int left = myTable.getRowElement(event.getIndex()).getAbsoluteLeft();
                myNestedWidget.getElement().getStyle().setTop(top, Unit.PX);
                myNestedWidget.getElement().getStyle().setLeft(left, Unit.PX);
                gridParentWidget.add(myNestedWidget);

                Scheduler.get().scheduleDeferred(new ScheduledCommand() {
                    @Override
                    public void execute() {
                        int height = myNestedWidget.getOffsetHeight();
                        myTable.getRowElement(event.getIndex()).getStyle().setHeight(height + "px");
                    ]
                });
            }
        }
    });
}

This is obviously an outline of the solution. The details of the implementation may vary slightly depending on which widgets you use for your parent widget and your nested widget. If you change z-indexes somewhere, you have to take it into account too. You also need to make sure that your nested widget fits into the width of your grid, or you'll need to wrap it in a ScrollPanel and set a width to it explicitly.

when i am implementing this, my nested widget is coming all over. When i click on the row then that row should be expanded, all rows beneath should move down. I feel CellTableBuilder is useful. But i am unable to find proper sample for it. Please help me. — Saritha, Sep 20 '12 at 06:57
Which widget is holding your CellTable? Do you see your nested widget when you add it? — Andrei Volgin, Sep 20 '12 at 13:32
in the above code i am passing list size of 50. But when executing its just showing only one row with last record. I need to display the list of all records. Why like that. please help me — Saritha, Sep 21 '12 at 09:35
This problem is not related to my code. Check the height of your CellTable. — Andrei Volgin, Sep 21 '12 at 14:44

Nested Grid in GWT

1 Answers1