Package com.google.gwt.user.client.ui

Class Grid

java.lang.Object
com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Panel
com.google.gwt.user.client.ui.HTMLTable
com.google.gwt.user.client.ui.Grid
All Implemented Interfaces:
HasAllDragAndDropHandlers, HasClickHandlers, HasDoubleClickHandlers, HasDragEndHandlers, HasDragEnterHandlers, HasDragHandlers, HasDragLeaveHandlers, HasDragOverHandlers, HasDragStartHandlers, HasDropHandlers, HasAttachHandlers, HasHandlers, EventListener, HasVisibility, HasWidgets, HasWidgets.ForIsWidget, IsWidget, SourcesTableEvents, Iterable<Widget>
Direct Known Subclasses:
CellGridImpl
public class Grid extends HTMLTable
A rectangular grid that can contain text, html, or a child Widget within its cells. It must be resized explicitly to the desired number of rows and columns.

Example

public class GridExample implements EntryPoint {

  public void onModuleLoad() {
    // Grids must be sized explicitly, though they can be resized later.
    Grid g = new Grid(5, 5);

    // Put some values in the grid cells.
    for (int row = 0; row < 5; ++row) {
      for (int col = 0; col < 5; ++col)
        g.setText(row, col, "" + row + ", " + col);
    }

    // Just for good measure, let's put a button in the center.
    g.setWidget(2, 2, new Button("Does nothing, but could"));

    // You can use the CellFormatter to affect the layout of the grid's cells.
    g.getCellFormatter().setWidth(0, 2, "256px");

    RootPanel.get().add(g);
  }
}

Use in UiBinder Templates

Grid widget consists of <g:row> elements. Each <g:row> element can contain one or more <g:cell> or <g:customCell> elements. Using <g:cell> attribute it is possible to place pure HTML content. <g:customCell> is used as a container for Widget type objects. (Note that the tags of the row, cell and customCell elements are not capitalized. This is meant to signal that the item is not a runtime object, and so cannot have a ui:field attribute.)

For example: 

 <g:Grid>
  <g:row styleName="optionalHeaderStyle">
    <g:customCell styleName="optionalFooCellStyle">
      <g:Label>foo</g:Label>
    </g:customCell>
    <g:customCell styleName="optionalBarCellStyle">
      <g:Label>bar</g:Label>
    </g:customCell>
  </g:row>
  <g:row>
    <g:cell>
      <div>foo</div>
    </g:cell>
    <g:cell>
      <div>bar</div>
    </g:cell>
  </g:row>
 </g:Grid>