GWT GRID

GWT GRID is used to create simple HTML table by extending HTMLTable.Grid for creating table. It can be configured according to need of number of rows and columns.

GWT Grid Class Declaration

Let's see the declaration of com.google.gwt.user.client.ui.Grid

GWT Grid Constructors

Constructor	Description
Grid()	It is a default constructor for Grid.
Grid(int rows, int columns)	It constructs a grid with the requested size.

GWT Grid Methods

Modifier and Types	Method	Description
boolean	clearCell(int row, int column)	It replaces the contents of the specified cell with a single space.
protected Element	createCell()	It creates a new, empty cell.
int	getCellCount(int row)	It return number of columns.
int	getColumnCount()	It gets the number of columns in this grid.
int	getRowCount()	It returns number of rows.
int	insertRow(int beforeRow)	It inserts a new row into the table.
protected void	prepareCell(int row, int column)	It checks that a cell is a valid cell in the table.
protected void	prepareColumn(int column)	It checks that the column index is valid.
protected void	prepareRow(int row)	It checks that the row index is valid.
void	removeRow(int row)	It removes the specified row from the table.
void	resize(int rows, int columns)	It resizes the grid.
void	resizeColumns(int columns)	It resizes the grid to the specified number of columns.
void	resizeRows(int rows)	It resizes the grid to the specified number of rows.

GWT GRID Example 1

//SimpleGrid1.java

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;

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);
  }
}

Output:

GWT GRID Example 2

//SimpleGrid2.java

mport com.google.gwt.core.client.EntryPoint;  
import com.google.gwt.user.client.ui.RootPanel;  
import com.gwtext.client.core.Connection;  
import com.gwtext.client.core.EventObject;  
import com.gwtext.client.core.TextAlign;  
import com.gwtext.client.core.UrlParam;  
import com.gwtext.client.data.*;  
import com.gwtext.client.widgets.Button;  
import com.gwtext.client.widgets.Panel;  
import com.gwtext.client.widgets.Toolbar;  
import com.gwtext.client.widgets.ToolbarButton;  
import com.gwtext.client.widgets.event.ButtonListenerAdapter;  
import com.gwtext.client.widgets.form.ComboBox;  
import com.gwtext.client.widgets.form.DateField;  
import com.gwtext.client.widgets.form.NumberField;  
import com.gwtext.client.widgets.form.TextField;  
import com.gwtext.client.widgets.grid.*;  
import com.gwtext.client.widgets.grid.event.GridCellListenerAdapter;  
  
import java.util.Date;  
  
public class EditableGridSample implements EntryPoint {  
  
    public void onModuleLoad() {  
        Panel panel = new Panel();  
        panel.setBorder(false);  
        panel.setPaddings(15);  
  
        HttpProxy proxy = new HttpProxy("data/plants.xml", Connection.GET);  
  
        final RecordDef recordDef = new RecordDef(  
                new FieldDef[]{  
                        new StringFieldDef("common"),  
                        new StringFieldDef("botanical"),  
                        new StringFieldDef("light"),  
                        new FloatFieldDef("price"),  
                        new DateFieldDef("availDate", "availability", "m/d/Y"),  
                        new BooleanFieldDef("indoor")  
                }  
        );  
  
        XmlReader reader = new XmlReader("plant", recordDef);  
        final Store store = new Store(proxy, reader);  
        store.load();  
  
        SimpleStore cbStore = new SimpleStore("lightTypes", new String[]{  
                "Shade",  
                "Mostly Shady",  
                "Sun or Shade",  
                "Mostly Sunny",  
                "Sunny"  
        });  
        cbStore.load();  
  
        final ComboBox cb = new ComboBox();  
        cb.setDisplayField("lightTypes");  
        cb.setStore(cbStore);  
  
        ColumnConfig commonCol = new ColumnConfig("Common Name", "common", 220, true, null, "common");  
        commonCol.setEditor(new GridEditor(new TextField()));  
  
        ColumnConfig lightCol = new ColumnConfig("Light", "light", 130);  
        lightCol.setEditor(new GridEditor(cb));  
  
  
        ColumnConfig priceCol = new ColumnConfig("Price", "price", 70, true);  
        priceCol.setAlign(TextAlign.RIGHT);  
        priceCol.setRenderer(new Renderer() {  
            public String render(Object value, CellMetadata cellMetadata, Record record,  
                                 int rowIndex, int colNum, Store store) {  
                return "$" + value;  
            }  
        });  
        NumberField numberField = new NumberField();  
        numberField.setAllowBlank(false);  
        numberField.setAllowNegative(false);  
        numberField.setMaxValue(1000);  
        priceCol.setEditor(new GridEditor(numberField));  
  
        ColumnConfig availableCol = new ColumnConfig("Available", "availDate", 95, true);  
  
        DateField dateField = new DateField();  
        dateField.setFormat("m/d/Y");  
        dateField.setMinValue("01/01/06");  
        dateField.setDisabledDays(new int[]{0, 6});  
        dateField.setDisabledDaysText("Plants are not available on the weekend");  
        availableCol.setEditor(new GridEditor(dateField));  
  
        ColumnConfig indoorCol = new ColumnConfig("Indoor?", "indoor", 55);  
  
        indoorCol.setRenderer(new Renderer() {  
            public String render(Object value, CellMetadata cellMetadata, Record record,  
                                 int rowIndex, int colNum, Store store) {  
                boolean checked = ((Boolean) value).booleanValue();  
                return "<img class=\"checkbox\" src=\"js/ext/resources/images/default/menu/" +  
                            (checked ? "checked.gif" : "unchecked.gif") + "\"/>";  
            }  
        });  
  
        ColumnConfig[] columnConfigs = {  
                commonCol,  
                lightCol,  
                priceCol,  
                availableCol,  
                indoorCol  
        };  
  
        ColumnModel columnModel = new ColumnModel(columnConfigs);  
        columnModel.setDefaultSortable(true);  
  
        final EditorGridPanel grid = new EditorGridPanel();  
  
        Toolbar toolbar = new Toolbar();  
        ToolbarButton button = new ToolbarButton("Add Plant", new ButtonListenerAdapter() {  
            public void onClick(Button button, EventObject e) {  
  
                Record plant = recordDef.createRecord(new Object[]{  
                            "New Plant1", "Anguinaria Canadensis", "Mostly Shady",  
                             new Float(5), "", Boolean.FALSE});  
                grid.stopEditing();  
                store.insert(0, plant);  
                grid.startEditing(0, 0);  
            }  
        });  
        toolbar.addButton(button);  
  
        grid.setStore(store);  
        grid.setColumnModel(columnModel);  
        grid.setWidth(500);  
        grid.setHeight(300);  
        grid.setAutoExpandColumn("common");  
        grid.setTitle("Editor Grid Example");  
        grid.setFrame(true);  
        grid.setClicksToEdit(1);  
        grid.setTopToolbar(toolbar);  
  
        grid.addGridCellListener(new GridCellListenerAdapter() {  
            public void onCellClick(GridPanel grid, int rowIndex, int colIndex, EventObject e) {  
                if (grid.getColumnModel().getDataIndex(colIndex).equals("indoor") &&  
                        e.getTarget(".checkbox", 1) != null) {  
                    Record record = grid.getStore().getAt(rowIndex);  
                    record.set("indoor", !record.getAsBoolean("indoor"));  
                }  
            }  
        });  
  
        store.load(new UrlParam[]{new UrlParam("rnd", new Date().getTime() + "")});  
        panel.add(grid);  
  
        RootPanel.get().add(panel);  
    }  
}

//SimpleGrid2.css

.grid {
  width: 150px;
  height: 50px;
  padding: 5px;
  position: absolute; 
  left: 220px; 
  top: 350px;  
}


.tableCell-even {
  padding: 5px;
  background: #008AB8;
  border: 1px solid #ffffff;
}

.tableCell-odd {
  padding: 5px;
  background: #FFCC33;
  border: 1px solid #ffffff;
}


.panel {
  background-color: #C3D9FF;
  border: 1px solid #000000;
  padding: 3px;
  margin: 3px;
  font-weight: normal;  
}

Output: