Grid

The Grid widget is the client-side counterpart for the server-side Grid component described in “Grid”.

The client-side API is almost identical to the server-side API, so its documentation is currently omitted here and we refer you to the API documentation. In the following, we go through some customization features of Grid.

Renderers

As described in “Column Renderers”, renderers draw the visual representation of data values on the client-side. They implement Renderer interface and its render() method. The method gets a reference to the element of the grid cell, as well as the data value to be rendered. An implementation needs to modify the element as needed.

For example, TextRenderer is implemented simply as follows:

  1. public class TextRenderer implements Renderer<String> {
  2.     @Override
  3.     public void render(RendererCellReference cell,
  4.                        String text) {
  5.         cell.getElement().setInnerText(text);
  6.     }
  7. }

The server-side renderer API should extend AbstractRenderer or ClickableRenderer with the data type accepted by the renderer. The data type also must be given for the superclass constructor.

  1. public class TextRenderer extends AbstractRenderer<String> {
  2.     public TextRenderer() {
  3.         super(String.class);
  4.     }
  5. }

The client-side and server-side renderer need to be connected with a connector extending from AbstractRendererConnector.

  1. @Connect(com.vaadin.ui.renderer.TextRenderer.class)
  2. public class TextRendererConnector
  3.        extends AbstractRendererConnector<String> {
  4.     @Override
  5.     public TextRenderer getRenderer() {
  6.         return (TextRenderer) super.getRenderer();
  7.     }
  8. }

Renderers can have parameters, for which normal client-side communication of extension parameters can be used. Please see the implementations of different renderers for examples.