GWT Grid

Class Constructors

Class Methods

Methods Inherited

Following are the classes from which this class inherits methods −

• com.google.gwt.user.client.ui.UIObjec
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.HTMLTable
• java.lang.Object

GWT GRID Example

SimpleGrid.gwt.xml: Configuration class for GWT.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.0//EN"
"http://google-web-toolkit.googlecode.com/svn/tags/2.6.0/distro-source/core/src/gwt-module.dtd">
<module rename-to='gwtdatagrid'>
  <inherits name='com.google.gwt.user.User'/>
  <inherits name='com.google.gwt.user.theme.clean.Clean'/>
  <entry-point class='com.javacodegeeks.client.GWTDataGrid'/>
 
  <source path='client'/>
 
  <add-linker name="xsiframe"/>
</module>

To take advantage of the latest GWT module capabilities, you should update this DTD reference when you update your version of GWT.

SimpleGrid.java: Class that serves as an entry point.

package com.javacodegeeks.client;
 
import java.util.Arrays;
import java.util.List;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.HasKeyboardSelectionPolicy.KeyboardSelectionPolicy;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.view.client.SelectionChangeEvent;
import com.google.gwt.view.client.SingleSelectionModel;
 
/**
* Entry point class define <code>onModuleLoad()</code>.
*/
public class GWTDataGrid implements EntryPoint {
/**
* A simple data type that represents an Address.
*/
private static class Address {
private final String houseNumber;
private final String streetName;
private final String county;
private final String postCode;
private final String country;
 
public Address(String houseNumber, String streetName, String county, String postCode, String country) {
  this.houseNumber = houseNumber;
  this.streetName = streetName;
  this.county = county;
  this.postCode = postCode;
  this.country = country;
 }
}
 
/*
* The list of data to display.
*/
private static final List<Address> ADDRESS = Arrays.asList(
  new Address("123", "Lloyds Road", "Middlesex", "TE0 6NB", "United Kingdom")
  ,new Address("456", "Oxford Street", "Oxford", "LK9 0CV", "United Kingdom"));
 
public void onModuleLoad() {
  DataGrid<Address> table = new DataGrid<Address>();
  table.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);
 
  TextColumn<Address> houseNumber = new TextColumn<Address>() {
    @Override
    public String getValue(Address object) {
    return object.houseNumber;
  }};
  table.addColumn(houseNumber, "House Number");
 
  TextColumn<Address> streetName = new TextColumn<Address>() {
    @Override
    public String getValue(Address object) {
    return object.streetName;
  }};
 table.addColumn(streetName, "Street Name");
 
  TextColumn<Address> county = new TextColumn<Address>() {
    @Override
    public String getValue(Address object) {
    return object.county;
  }};
 table.addColumn(county, "County");
 
  TextColumn<Address> postCode = new TextColumn<Address>() {
    @Override
    public String getValue(Address object) {
    return object.postCode;
  }};
  table.addColumn(postCode, "Post Code");
 
  TextColumn<Address> country = new TextColumn<Address>() {
    @Override
    public String getValue(Address object) {
    return object.country;
  }};
  table.addColumn(country, "Country");
 
// Add a selection model to handle user selection.
  final SingleSelectionModel<Address> selectionModel = new SingleSelectionModel<Address>();
  table.setSelectionModel(selectionModel);
  selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
    public void onSelectionChange(SelectionChangeEvent event) {
    Address selected = selectionModel.getSelectedObject();
    if (selected != null) {
      Window.alert("You selected: " + selected.houseNumber + " " + selected.streetName + " " + selected.county
+ " " + selected.postCode + " " + selected.country);
}
}
});
  table.setRowCount(ADDRESS.size(), true);
  table.setRowData(0, ADDRESS);
  table.setWidth("100%");
  SimpleLayoutPanel slp = new SimpleLayoutPanel();
  slp.add(table);
 
// Add it to the root panel.
RootLayoutPanel.get().add(slp);
}
}

You can also try this code with Online Java Compiler

Run Code

Output

Frequently Asked Questions

What is the Advanced Flex Table?

All grids are derived from Advanced Flex Table. Adds the following functionality to the standard GWT FlexTable widget: support for thread tags and vertical scrolling of table content independent of the browser

What is the Editable Grid?

An extension of the Advanced Flex Table is the Editable Grid. It allows the editing of cells.

What is the Hierarchical Grid?

An Editable Grid can be extended by a Hierarchical Grid that supports all the same features. A subgrid can also be displayed for each cell of the main grid. 

What is the Tree Grid?

Tree Grid displays data models in a tree-like format. The Editable Grid can also be used. It will be the data models that will differ. 

How many levels are allowed in the hierarchical grid?

You may have as many as you like. In subgrids, you must use Hierarchical data models.   

Conclusion

GWT Grid can be very useful in arranging elements on the application page. Following this article will help you make your first application using Grid. You can also visit this link if you want to learn more about other JAVA frameworks.

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in CSS, Competitive Programming, Databases, System Design and many more!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!!